@charset "utf-8";
/*
 * vms.modern.css — 모던 다크 액센트 테마 오버레이
 * ------------------------------------------------------------------
 * 기존 Bootstrap 3 마크업/JS와 vms.comn.css를 건드리지 않고, 그 "다음"에
 * 로드되어 색/타이포/버튼/카드/테이블/폼/네비를 일괄 재단장한다.
 * 롤백: 레이아웃 head 에서 이 파일 <link> 한 줄만 제거하면 원복.
 *
 * 컨셉: 다크 네이비 그라데이션 크롬(헤더/네비/푸터/주요버튼) +
 *       밝고 가독성 높은 본문 영역. PC/모바일 모두 고려.
 * ================================================================== */

/* ---- Pretendard 웹폰트(있으면 사용, 없으면 시스템 스택 폴백) -------- */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* ====================== 디자인 토큰 ============================== */
:root{
	--vms-brand:       #1C57A5;            /* 테넌트 브랜드(오버라이드 지점) */
	--vms-brand-600:   #16498c;
	--vms-brand-300:   #4f86d6;
	--vms-ink-1:       #0b1f3a;            /* 다크 크롬 그라데이션 시작 */
	--vms-ink-2:       #13294b;            /* 다크 크롬 그라데이션 끝 */
	--vms-bg:          #f5f7fb;            /* 본문 배경(밝음) */
	--vms-surface:     #ffffff;            /* 카드/패널/모달 표면 */
	--vms-line:        #e3e8f0;            /* 보더/구분선 */
	--vms-text:        #1f2937;            /* 본문 텍스트 */
	--vms-muted:       #6b7280;            /* 보조 텍스트 */
	--vms-danger:      #e11d48;
	--vms-radius:      12px;
	--vms-radius-sm:   8px;
	--vms-shadow:      0 2px 10px rgba(15,23,42,.08);
	--vms-shadow-lg:   0 12px 32px rgba(15,23,42,.16);
	--vms-ring:        0 0 0 3px rgba(28,87,165,.18);
	--vms-chrome-grad: linear-gradient(120deg, var(--vms-ink-1) 0%, var(--vms-ink-2) 100%);
}

/* ====================== 베이스 ================================== */
html, body{ height: 100%; }
body{
	font-family: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, "Noto Sans KR", "Malgun Gothic", "맑은 고딕", sans-serif;
	background-color: var(--vms-bg);
	color: var(--vms-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: -0.01em;
	/* sticky footer: body를 세로 플렉스로 → footer를 항상 하단에 */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
/* #holder 로 감싸는 레이아웃도 동일하게 세로 플렉스 + 화면 높이 채움 */
#holder{
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	min-height: 100vh;
}
code, kbd, pre, samp{
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Pretendard", monospace;
}
a{ transition: color .15s ease, background-color .15s ease; }

/* ====================== TOP BAR (navbar 위 1줄) =================== */
.vms-topbar{
	background: var(--vms-brand);
	border-bottom: 2px solid var(--vms-brand-600);
	height: 32px;
	display: flex;
	align-items: center;
	width: 100%;
}
.vms-topbar .container{
	display: flex;
	align-items: center;
	height: 100%;
	max-width: 100%;
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;
}
.vms-topbar-left,
.vms-topbar-right{
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: rgba(255,255,255,.92);
}
.vms-topbar-right{
	margin-left: auto;
}
.vms-topbar-left *,
.vms-topbar-right *{
	font-size: 12px;
}
.vms-topbar-left a,
.vms-topbar-right a{
	color: #fff;
	text-decoration: none;
}
.vms-topbar-left a:hover,
.vms-topbar-right a:hover{
	color: #fff;
	text-decoration: underline;
}
.vms-topbar .v-profile-role{
	color: rgba(255,255,255,.82);
}
.vms-topbar .v-profile-logintime{
	color: rgba(255,255,255,.7);
}
.vms-topbar-logout{
	border: 1px solid rgba(255,255,255,.55);
	border-radius: 4px;
	padding: 1px 8px;
	color: #fff !important;
}
.vms-topbar-logout:hover{
	background: rgba(255,255,255,.2);
	color: #fff !important;
}
.vms-topbar .dropdown{ display: inline-block; position: relative; }
.vms-topbar .dropdown-menu{
	top: 100%;
	left: 0;
	min-width: 130px;
	margin-top: 4px;
}
.vms-topbar-lang-label{
	color: rgba(255,255,255,.85);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}
.vms-topbar .lang-select{
	background: rgba(255,255,255,.18);
	color: #fff;
	border: 1px solid rgba(255,255,255,.45);
	border-radius: 4px;
	padding: 2px 6px;
	font-size: 12px;
	cursor: pointer;
}
.vms-topbar .lang-select:hover{
	background: rgba(255,255,255,.28);
}
.vms-topbar .lang-select option{ color: #222; }

/* ====================== 다크 크롬: 상단 네비 ===================== */
.navbar.navbar-default{
	background: var(--vms-chrome-grad);
	border: 0;
	border-bottom: 3px solid var(--vms-brand);
	box-shadow: 0 2px 14px rgba(11,31,58,.22);
	height: auto;
	min-height: 50px;
}
/* nav-container: 메뉴 절대위치의 기준 */
.navbar.navbar-default .nav-container{
	position: relative;
	min-height: 50px;
}
/* navbar-header: 100% 너비 유지, 브랜드 중앙 정렬 */
.navbar.navbar-default .navbar-header{
	width: 100%;
	min-height: 50px !important;
	height: 50px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
/* vms-main-menu: 오른쪽 절대위치 */
.navbar.navbar-default .navbar-collapse{
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
/* comn.css vms-main-menu top:-70px 재설정 */
.navbar.navbar-default .vms-main-menu{
	position: static !important;
	top: auto !important;
	float: none !important;
	margin: 0;
}
/* 네비 내부 텍스트/링크는 밝게 */
.navbar-default .navbar-nav > li > a,
.navbar-default .v-profile-menu a,
.navbar-default .vms-main-menu > li > a,
.navbar-default .v-profile-role,
.navbar-default .v-profile-logintime,
.navbar-default .vms-profile a,
.navbar-default .vms-logout a,
.navbar-default .vms-logout-eng a{
	color: rgba(255,255,255,.88) !important;
	font-weight: 600;
}
.navbar-default .v-profile-logintime{ color: rgba(255,255,255,.6) !important; font-weight: 500; }
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .vms-main-menu > li > a:hover{
	color: #fff !important;
	background-color: rgba(255,255,255,.10);
	border-radius: var(--vms-radius-sm);
}
.navbar-default .vms-main-menu > li{ margin: 0 2px; }
.navbar-default .vms-main-menu > li > a{ border-radius: var(--vms-radius-sm); }
.navbar-default .open > a,
.navbar-default .open > a:hover,
.navbar-default .open > a:focus{
	background-color: rgba(255,255,255,.12) !important;
	color:#fff !important;
}
.navbar-default .caret{ color: rgba(255,255,255,.7); }

/*
 * v-brand: 시각 스타일만 오버라이드. top/position은 comn.css(0,3,0) 그대로 유지.
 * 이 선택자(0,4,0)는 background·color·box-shadow만 덮어씀.
 */
.navbar.navbar-default .navbar-header .v-brand{
	color: #fff;
	background: transparent;
	border-radius: 0;
	padding: 6px 12px;
	box-shadow: none;
	top: 0;
	float: none;
	display: inline-flex;
	align-items: center;
}
.navbar.navbar-default .navbar-header .v-brand img{
	margin-top: 0 !important;
	max-height: 38px;
	width: auto;
	vertical-align: middle;
}
.navbar.navbar-default .navbar-header .v-brand .v-brand-name{
	color: #fff;
	margin-top: 0;
	line-height: 38px;
	height: 38px;
	font-size: 25px;
	font-weight: 700;
	vertical-align: middle;
}
.navbar.navbar-default .navbar-header .v-brand .v-brand-name::before{
	background: rgba(255,255,255,.55);
}

/* 드롭다운 메뉴: 라이트 팝오버(모던) */
.navbar .dropdown-menu{
	border: 1px solid var(--vms-line);
	border-radius: var(--vms-radius);
	box-shadow: var(--vms-shadow-lg);
	padding: 8px;
	margin-top: 8px;
	overflow: hidden;
}
.navbar .dropdown-menu > li > a{
	color: var(--vms-text) !important;
	border-radius: var(--vms-radius-sm);
	padding: 9px 14px;
	font-weight: 500;
}
.navbar .dropdown-menu > li > a:hover,
.navbar .dropdown-menu > li > a:focus{
	background-color: rgba(28,87,165,.08);
	color: var(--vms-brand) !important;
}
.navbar ul.vms-main-menu li.vms-menu-ntfc a .badge{
	background-color: var(--vms-danger);
	box-shadow: 0 0 0 2px rgba(255,255,255,.25);
}

/* 언어 선택 */
.navbar-default .lang-select{
	background: rgba(255,255,255,.12);
	color:#fff;
	border:1px solid rgba(255,255,255,.25);
	border-radius: var(--vms-radius-sm);
	padding: 2px 6px;
}
.navbar-default .lang-select option{ color:#222; }

/* ====================== 로그인 레이아웃 크롬 ===================== */
.login-navbar-default{
	background: var(--vms-chrome-grad);
	border:0;
	border-bottom: 3px solid var(--vms-brand);
}
.login-navbar-default .navbar-nav > li > a,
.login-navbar-default .v-profile-menu a,
.login-navbar-default .vms-profile a,
.login-navbar-default .vms-logout a{ color: rgba(255,255,255,.9) !important; }
.login-navbar-default .lang-select{
	background: rgba(255,255,255,.12); color:#fff;
	border:1px solid rgba(255,255,255,.25); border-radius: var(--vms-radius-sm);
}
.login-navbar-default .lang-select option{ color:#222; }

/* ====================== 버튼 ==================================== */
.btn{
	border-radius: var(--vms-radius-sm);
	font-weight: 600;
	transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
	border: 1px solid transparent;
}
.btn:active{ transform: translateY(1px); }
.btn-default{
	background: var(--vms-surface);
	border: 1px solid var(--vms-line);
	color: var(--vms-text);
	box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.btn-default:hover,
.btn-default:focus{
	background: #f3f6fb;
	border-color: #cdd7e6;
	color: var(--vms-brand);
}
.btn-primary{
	background: linear-gradient(120deg, var(--vms-brand) 0%, var(--vms-brand-600) 100%);
	border: 1px solid var(--vms-brand-600);
	color:#fff;
	box-shadow: 0 4px 12px rgba(28,87,165,.28);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
	background: linear-gradient(120deg, var(--vms-brand-600) 0%, #103a73 100%);
	border-color:#103a73;
	color:#fff;
}
.btn-success{ background:#16a34a; border-color:#15803d; color:#fff; }
.btn-danger{ background: var(--vms-danger); border-color:#be123c; color:#fff; }
.btn:focus, .btn:focus-visible{ outline:none; box-shadow: var(--vms-ring); }
.btn-more{ box-shadow:none !important; }

/* ====================== 폼 컨트롤 ============================== */
.form-control,
.form-group .form-control{
	border-radius: var(--vms-radius-sm);
	border: 1px solid var(--vms-line);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
	font-size: 14px;
	height: 34px;
	padding: 6px 10px;
}
.form-control:focus{
	border-color: var(--vms-brand-300);
	box-shadow: var(--vms-ring);
}
/* input-sm / form-group-sm의 작은 크기를 일반 크기로 통일 */
.input-sm, .form-group-sm .form-control, .form-group-sm select.form-control{
	height: 34px !important;
	padding: 6px 10px !important;
	font-size: 14px !important;
	border-radius: var(--vms-radius-sm) !important;
}
/* 인라인 폼 날짜 입력 최소 폭 */
.v-search-form input[name="dateFrom"],
.v-search-form input[name="dateTo"],
.v-search-form input[name="iemValue"]{
	min-width: 120px;
}
.v-search-form select.form-control{
	min-width: 130px;
}
.input-group-addon{
	border-radius: var(--vms-radius-sm);
	border-color: var(--vms-line);
	background: #f3f6fb;
}
label{ color: var(--vms-text); }
/* 로그인 폼 입력 필드 크기 */
.v-visitr-login .form-control,
.v-visitr-login .form-control.input-sm{
	height: 38px !important;
	font-size: 15px !important;
	padding: 8px 12px !important;
}

/* ====================== 패널/카드 ============================== */
.panel{
	border: 1px solid var(--vms-line);
	border-radius: var(--vms-radius);
	box-shadow: var(--vms-shadow);
	overflow: hidden;
	background: var(--vms-surface);
}
.panel-default > .panel-heading{
	background: #f6f8fc;
	border-bottom: 1px solid var(--vms-line);
	color: var(--vms-text);
	font-weight: 700;
}
.panel-notice{ border-radius: var(--vms-radius); }
.well{
	border-radius: var(--vms-radius);
	border: 1px solid var(--vms-line);
	background: var(--vms-surface);
	box-shadow: var(--vms-shadow);
}

/* ====================== 테이블 ================================= */
.table > thead > tr > th,
.table th{
	background-color: #eef2f8;   /* 기존 갈색(#938779) 제거 */
	color: var(--vms-text);
	border-bottom: 1px solid var(--vms-line) !important;
	font-weight: 700;
	vertical-align: middle;
}
.table > tbody > tr > td{
	border-top: 1px solid #eef1f6;
	vertical-align: middle;
}
.table-hover > tbody > tr:hover{
	background-color: rgba(28,87,165,.05);
}
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td{
	border-color: var(--vms-line);
}

/* ====================== 모달 ==================================== */
.modal-content{
	border: 0;
	border-radius: var(--vms-radius);
	box-shadow: var(--vms-shadow-lg);
	overflow: hidden;
}
.modal-header{
	background: #f6f8fc;
	border-bottom: 1px solid var(--vms-line);
}
.modal-header .modal-title{ font-weight: 700; color: var(--vms-text); }
.modal-footer{ border-top: 1px solid var(--vms-line); }

/* ====================== 페이지 헤딩 ============================ */
h1{
	background: none !important;       /* 기존 mag_tit.jpg 배경 제거 */
	padding-left: 16px !important;
	border-left: 5px solid var(--vms-brand);
	line-height: 1.3 !important;
	font-weight: 800;
	color: var(--vms-text);
	margin: 6px 0 18px;
}
.page-header{
	border-bottom: 1px solid var(--vms-line);
	padding-bottom: 12px;
}
legend{
	font-weight: 700;
	color: var(--vms-text);
	border-bottom: 1px solid var(--vms-line);
	padding-bottom: 8px;
}

/* ====================== 페이지네이션/배지/알럿 ================= */
.pagination li a,
.pagination li a span{ color: var(--vms-brand); }
.pagination li.active a,
.pagination li.active a:hover,
.pagination li.active a:focus{
	background-color: var(--vms-brand) !important;
	border-color: var(--vms-brand) !important;
	color:#fff !important;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span{ border-top-left-radius: var(--vms-radius-sm); border-bottom-left-radius: var(--vms-radius-sm); }
.pagination > li:last-child > a,
.pagination > li:last-child > span{ border-top-right-radius: var(--vms-radius-sm); border-bottom-right-radius: var(--vms-radius-sm); }
.badge{ background-color: var(--vms-brand); border-radius: 999px; font-weight: 700; }
.alert{ border-radius: var(--vms-radius); border:1px solid transparent; }
.label{ border-radius: 999px; padding: .25em .7em; font-weight: 700; }

/* ====================== 푸터(다크) ============================= */
footer{
	background: var(--vms-chrome-grad);
	border-top: 0;
	border-bottom: 0;
	color: rgba(255,255,255,.75);
	/* sticky footer: 위 콘텐츠가 짧아도 항상 화면 하단에 고정 */
	margin-top: auto;
	flex-shrink: 0;
	/* 고정 60px 높이 해제 — 내용 길이에 맞게 패딩 기반으로 */
	height: auto;
	width: 100%;
	left: 0;
	padding: 18px 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
/* 로그인/방문자 로그인 페이지: comn.css 의 '.v-visitr-login footer'(밝은 회색·margin-top:50px)가
   다크/스티키 푸터를 덮어쓰므로, 동일 명시도(modern 이 나중 로드)로 되돌려 화면 하단 고정 + 다크 유지. */
.v-visitr-login footer{
	margin-top: auto;
	height: auto;
	background: var(--vms-chrome-grad);
	border: 0;
	color: rgba(255,255,255,.75);
}
footer a{
	color:#fff !important;        /* comn.css 의 footer a(#333 짙은 회색)가 다크 푸터에서 거의 안 보이는 것 차단 */
	text-decoration: none;
	padding-left: 10px;
	border-left: 3px solid #5b9dff;  /* 앞 기호(세로 바): 밝은 브랜드 블루 — 다크 푸터에서 또렷 */
}
footer a:hover,
footer a:focus,
footer a:visited{
	color:#fff !important;
	text-decoration: underline;
}
footer pre,
footer #footer{
	color: rgba(255,255,255,.78);
	background: transparent;
}

/* ====================== 방문자 랜딩(indx) 타일 강화 =========== */
.v-indx .btn-req,
.v-indx .btn-search,
.v-indx .btn-pass,
.v-indx .btn-export{
	border-radius: var(--vms-radius);
	box-shadow: var(--vms-shadow);
	transition: transform .15s ease, box-shadow .15s ease;
	overflow: hidden;
}
.v-indx .btn-req{ background: linear-gradient(150deg, var(--vms-brand) 0%, var(--vms-brand-600) 100%); }
.v-indx .btn-pass{ background: linear-gradient(150deg, var(--vms-brand) 0%, var(--vms-brand-600) 100%); }
.v-indx .btn-search,
.v-indx .btn-export{ background: linear-gradient(150deg, #8b95a3 0%, #6f7b8c 100%); }
.v-indx .btn-req:hover,
.v-indx .btn-search:hover,
.v-indx .btn-pass:hover,
.v-indx .btn-export:hover{
	transform: translateY(-4px);
	box-shadow: var(--vms-shadow-lg);
}
.v-indx .panel-notice{
	border: 1px solid var(--vms-line);
	box-shadow: var(--vms-shadow);
	height: auto;
	background: var(--vms-surface);
}
.v-indx .jumbotron{
	background: transparent;
}

/* ====================== 반응형(PC/모바일) ====================== */
@media (max-width: 992px){
	.navbar.navbar-default{ min-height: 0; }
}

@media (max-width: 768px){
	/* ================================================================
	 * TOPBAR 모바일
	 * 컨테이너를 position:relative 기준점으로 삼고,
	 * 언어선택(.vms-topbar-right)을 absolute right로 고정
	 * ================================================================ */
	.vms-topbar{
		display: block !important;
		background: var(--vms-brand) !important;
		width: 100% !important;
		height: 38px !important;
		line-height: 38px;
		box-sizing: border-box;
	}
	.vms-topbar .container{
		position: relative !important;
		display: block !important;
		height: 38px !important;
		max-width: 100% !important;
		width: 100% !important;
		padding: 0 12px !important;
		box-sizing: border-box !important;
	}
	.vms-topbar-left{
		display: inline-flex !important;
		align-items: center;
		height: 38px;
		gap: 6px;
		font-size: 12px;
		color: #fff;
		vertical-align: top;
		max-width: calc(100% - 110px);
		overflow: hidden;
	}
	.vms-topbar-right{
		position: absolute !important;
		right: 12px !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		display: flex !important;
		align-items: center;
		gap: 6px;
		margin-left: 0 !important;
	}
	.vms-topbar .v-profile-logintime{ display: none !important; }

	/* ================================================================
	 * NAVBAR 모바일: 브랜드 절대 중앙
	 * navbar-header를 position:relative 기준점으로,
	 * v-brand를 left:50% + translateX(-50%)로 수평 중앙 고정
	 * ================================================================ */
	.navbar.navbar-default{
		height: auto !important;
		min-height: 50px !important;
	}
	.navbar.navbar-default .navbar-header{
		position: relative !important;
		display: block !important;
		float: none !important;
		width: 100% !important;
		height: 50px !important;
		min-height: 50px !important;
		text-align: center !important;
	}
	.navbar.navbar-default .navbar-header .v-brand{
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%) !important;
		float: none !important;
		display: inline-flex !important;
		align-items: center !important;
		white-space: nowrap;
	}
	/* 모바일 메뉴: 흐름으로 복귀 (절대위치 해제) */
	.navbar.navbar-default .navbar-collapse{
		position: static !important;
		top: auto !important;
		transform: none !important;
		right: auto !important;
	}
	.navbar-default .vms-main-menu{ float: none; }
	.navbar-default .vms-main-menu > li{ display: inline-block; }

	/* 본문 컨테이너 풀폭 */
	.container,
	.main-container,
	.v-indx .main-container{
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 14px;
		padding-right: 14px;
	}

	/* 방문자 랜딩 타일: 세로 2열/1열 스택 */
	.v-indx .btn-space,
	.v-indx .notice-space,
	.v-indx .panelspace,
	.v-indx .prospace{
		float: none !important;
		width: 100% !important;
		margin: 0 0 16px 0 !important;
	}
	.v-indx .btn-req,
	.v-indx .btn-search,
	.v-indx .btn-pass,
	.v-indx .btn-export{
		float: none !important;
		display: block;
		width: 100% !important;
		height: auto !important;
		min-height: 160px;
		margin: 0 0 14px 0 !important;
		padding: 28px 16px !important;
	}
	.v-indx .main-text{ font-size: 22px; }
	.v-indx .sub-text{ font-size: 15px; }

	/* 넓은 테이블은 가로 스크롤 */
	.table-responsive,
	.panel-body > .table,
	.main-container > .table{
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* 헤딩 스케일 다운 */
	h1{ font-size: 20px !important; }

	/* 터치 타깃 확대 */
	.btn{ padding-top: 10px; padding-bottom: 10px; }
	.navbar .dropdown-menu > li > a{ padding: 12px 14px; }

	/* 폼 한 줄 입력 폭 확보 */
	.form-inline .form-control{ width: 100%; margin-bottom: 8px; }
}

@media (max-width: 480px){
	/* 극소형 단말 */
	.vms-topbar{ display: flex !important; min-height: 34px !important; }
	.vms-topbar-lang-label{ display: none !important; }
	.vms-topbar .v-profile-role{ display: none !important; }
	.vms-topbar-left,
	.vms-topbar-right{ font-size: 11px !important; gap: 5px; }
	.vms-topbar-logout{ padding: 1px 6px; }

	.v-indx .main-text{ font-size: 20px; }
	footer{ font-size: 12px; }
}

/* ================================================================
 * 최종 강제 오버라이드 (ID 기반, 명시도 1,x,x)
 * comn.css(.navbar-default height:110px / .v-brand top:35px) 가
 * 끝까지 이기는 케이스를 차단. 모든 폭에서 navbar 50px + 브랜드 중앙.
 * #headerInfo = <nav id="headerInfo" class="navbar navbar-default">
 * ================================================================ */
#headerInfo.navbar.navbar-default{
	height: 50px !important;
	min-height: 50px !important;
}
#headerInfo .nav-container{
	position: relative !important;
	height: 50px !important;
	min-height: 50px !important;
}
/* 빈/숨김 메뉴 영역이 흐름에서 navbar 높이를 늘리지 못하게 흐름에서 제거 */
#headerInfo .navbar-collapse{
	position: absolute !important;
	top: 50% !important;
	right: 0 !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	max-height: none !important;
	box-shadow: none !important;
}
#headerInfo .navbar-header{
	position: relative !important;
	float: none !important;
	width: 100% !important;
	height: 50px !important;
	min-height: 50px !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
}
#headerInfo .navbar-header .v-brand{
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	float: none !important;
	margin: 0 !important;
	padding: 6px 12px !important;
	display: inline-flex !important;
	align-items: center !important;
	width: auto !important;
}
#headerInfo .navbar-header .v-brand img{
	margin: 0 !important;
	max-height: 38px !important;
	width: auto !important;
}
#headerInfo .navbar-header .v-brand .v-brand-name{
	margin: 0 !important;
	height: 38px !important;
	line-height: 38px !important;
	vertical-align: middle !important;
}

/* ================================================================
 * 로고 이미지 표기(텍스트 아님)일 때만: 네비바를 흰색으로, 로고는 1.5배+로.
 * - :has(.v-brand img) → 실제 로고 이미지가 렌더될 때만 발동.
 *   v-brand-name(텍스트)만 있는 경우엔 미발동 → 현행(어두운 네비바) 그대로.
 * - 흰 배경이므로 메뉴/언어선택/caret 등 흰색 텍스트를 어둡게 같이 뒤집음.
 * ================================================================ */
/* 네비바 흰색 + 높이 확대(로고 ~60px 수용) */
#headerInfo.navbar.navbar-default:has(.v-brand img){
	background: #fff !important;
	box-shadow: 0 2px 10px rgba(11,31,58,.12) !important;
}
#headerInfo.navbar.navbar-default:has(.v-brand img),
#headerInfo:has(.v-brand img) .nav-container,
#headerInfo:has(.v-brand img) .navbar-header{
	height: 92px !important;
	min-height: 92px !important;
}
/* 로고: 38px → 75px (약 2배).
 * img 태그에 인라인 height="40"이 박혀 있어 max-height로는 안 커짐 →
 * 명시적 height로 강제(인라인 height 속성보다 CSS가 우선). */
#headerInfo:has(.v-brand img) .navbar-header .v-brand img{
	height: 75px !important;
	max-height: 75px !important;
	width: auto !important;
}
/* 흰 배경 대비 — 메뉴/프로필/언어선택/caret 어둡게 */
#headerInfo:has(.v-brand img) .navbar-nav > li > a,
#headerInfo:has(.v-brand img) .v-profile-menu a,
#headerInfo:has(.v-brand img) .vms-main-menu > li > a,
#headerInfo:has(.v-brand img) .v-profile-role,
#headerInfo:has(.v-brand img) .vms-profile a,
#headerInfo:has(.v-brand img) .vms-logout a,
#headerInfo:has(.v-brand img) .vms-logout-eng a{
	color: var(--vms-ink, #1f2d3d) !important;
}
#headerInfo:has(.v-brand img) .v-profile-logintime{ color: rgba(0,0,0,.5) !important; }
#headerInfo:has(.v-brand img) .navbar-nav > li > a:hover,
#headerInfo:has(.v-brand img) .navbar-nav > li > a:focus,
#headerInfo:has(.v-brand img) .vms-main-menu > li > a:hover{
	color: var(--vms-brand, #0b3d91) !important;
	background-color: rgba(11,31,58,.06) !important;
}
#headerInfo:has(.v-brand img) .open > a,
#headerInfo:has(.v-brand img) .open > a:hover,
#headerInfo:has(.v-brand img) .open > a:focus{
	background-color: rgba(11,31,58,.08) !important;
	color: var(--vms-brand, #0b3d91) !important;
}
#headerInfo:has(.v-brand img) .caret{ color: rgba(0,0,0,.55) !important; }
#headerInfo:has(.v-brand img) .lang-select{
	background: rgba(11,31,58,.06) !important;
	color: var(--vms-ink, #1f2d3d) !important;
	border: 1px solid rgba(11,31,58,.18) !important;
}
@media (max-width: 768px){
	#headerInfo.navbar.navbar-default:has(.v-brand img),
	#headerInfo:has(.v-brand img) .navbar-header{
		height: 66px !important;
		min-height: 66px !important;
	}
	#headerInfo:has(.v-brand img) .navbar-header .v-brand img{
		height: 50px !important;
		max-height: 50px !important;
	}
}

/* ================================================================
 * 관리자 좌측 사이드바 레이아웃 (.v-admin = 로그인한 시스템 사용자)
 * - 상단 브랜드바(#headerInfo)는 그대로 두고, 인증 메뉴를 좌측 사이드바로.
 * - 방문자/익명 페이지(.v-admin 없음)에는 영향 없음(사이드바 display:none + th:if).
 * ================================================================ */
.vms-shell{ flex: 1 0 auto; }
.vms-main{ min-width: 0; }
.v-admin .vms-shell{ display: flex; align-items: stretch; }
.v-admin .vms-main{ flex: 1 1 auto; }

.vms-sidebar{ display: none; }
.v-admin .vms-sidebar{
	display: block;
	flex: 0 0 224px;
	width: 224px;
	background: var(--vms-chrome-grad);
	color: rgba(255,255,255,.92);
	padding: 8px 0 24px;
	border-right: 1px solid rgba(0,0,0,.15);
}
/* 사이드바 안에서는 메뉴를 세로 + 드롭다운 항상 펼침(아코디언처럼) */
.v-admin .vms-sidebar .vms-main-menu{
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	position: static !important;
	display: block !important;
}
.v-admin .vms-sidebar .vms-main-menu > li{
	display: block !important;
	float: none !important;
	margin: 0 !important;
}
.v-admin .vms-sidebar .vms-main-menu > li > a{
	display: block;
	padding: 11px 18px;
	color: rgba(255,255,255,.95) !important;
	border-radius: 0 !important;
	white-space: normal;
	background: transparent !important;
}
.v-admin .vms-sidebar .vms-main-menu > li > a:hover,
.v-admin .vms-sidebar .vms-main-menu > li.open > a{
	background: rgba(255,255,255,.10) !important;
	color: #fff !important;
}
.v-admin .vms-sidebar .dropdown-menu{
	position: static !important;
	display: block !important;
	float: none !important;
	width: 100% !important;
	background: rgba(0,0,0,.18) !important;
	border: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 2px 0 !important;
}
.v-admin .vms-sidebar .dropdown-menu > li > a{
	padding: 8px 18px 8px 42px !important;
	color: rgba(255,255,255,.8) !important;
	white-space: normal;
}
.v-admin .vms-sidebar .dropdown-menu > li > a:hover{
	background: rgba(255,255,255,.08) !important;
	color: #fff !important;
}
.v-admin .vms-sidebar .caret{ display: none !important; }
.v-admin .vms-sidebar .dropdown > .dropdown-toggle{ cursor: default; }
.v-admin .vms-sidebar .glyphicon{ margin-right: 8px; }
/* 관리자 화면 본문 여백 */
.v-admin .vms-main > .container,
.v-admin .vms-main > .container-fluid{ padding-top: 18px; padding-bottom: 24px; }
/* 관리자 화면에서는 브랜드를 좌측 정렬(가운데 정렬 해제) */
.v-admin #headerInfo .navbar-header{ justify-content: flex-start !important; padding-left: 16px; }
/* 현재 페이지에 해당하는 사이드바 메뉴 활성화 표시(좌측 강조 바) */
.v-admin .vms-sidebar a.vms-active{
	background: rgba(255,255,255,.16) !important;
	color: #fff !important;
	box-shadow: inset 3px 0 0 var(--vms-brand-300, #5b9dff);
}
/* 관리자 본문은 사이드바 옆 가용 공간을 꽉 채워 사용(고정폭 .container 해제) */
.v-admin .vms-main > .container{
	width: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 18px 24px 28px !important;
}

/* ====================== flatpickr 캘린더 테마 ====================== */
/* flatpickr.min.css 보다 뒤에 로드되므로 오버라이드 우선. 색 대비·셀 크기를 키워 가시성 강화. */
.flatpickr-calendar{
	border: 1px solid var(--vms-line) !important;
	border-radius: var(--vms-radius) !important;
	box-shadow: var(--vms-shadow-lg) !important;
	width: auto !important;
}
/* 상단 월/연도 바: 브랜드색 헤더로 명확히 */
.flatpickr-months{
	background: var(--vms-brand) !important;
	border-radius: var(--vms-radius) var(--vms-radius) 0 0 !important;
	padding: 4px 0 !important;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months{
	color: #fff !important; fill: #fff !important;
}
.flatpickr-monthDropdown-months{ background: var(--vms-brand) !important; font-weight: 700 !important; }
.flatpickr-current-month input.cur-year{ font-weight: 700 !important; }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg{ fill: #fff !important; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg{ fill: #ffe08a !important; }
/* 요일 헤더 */
span.flatpickr-weekday{ color: var(--vms-brand-600) !important; font-weight: 700 !important; }
/* 날짜 셀: 더 크게 */
.flatpickr-day{
	max-width: 42px !important; height: 40px !important; line-height: 40px !important;
	border-radius: var(--vms-radius-sm) !important;
	color: var(--vms-text) !important; font-weight: 500 !important;
}
.flatpickr-day:hover{ background: rgba(28,87,165,.12) !important; }
/* 오늘: 강조 링 */
.flatpickr-day.today{
	border: 2px solid var(--vms-brand-300) !important;
	font-weight: 700 !important;
}
.flatpickr-day.today:hover{ background: rgba(28,87,165,.12) !important; color: var(--vms-text) !important; }
/* 선택일: 브랜드색 채움 + 흰 글자 */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange{
	background: var(--vms-brand) !important;
	border-color: var(--vms-brand) !important;
	color: #fff !important; font-weight: 700 !important;
	box-shadow: var(--vms-ring) !important;
}
/* 범위 선택 중간 */
.flatpickr-day.inRange{
	background: rgba(28,87,165,.14) !important;
	border-color: rgba(28,87,165,.14) !important;
	box-shadow: -5px 0 0 rgba(28,87,165,.14), 5px 0 0 rgba(28,87,165,.14) !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{ color: var(--vms-muted) !important; opacity: .45 !important; }
/* 토/일 색상 — flatpickr 기본 firstDayOfWeek=일요일 기준 컬럼 위치(nth-child)로 칠함.
   (요일 클래스가 없어 위치로 처리. 선택일/오늘 채움색은 유지하도록 :not 으로 제외) */
.flatpickr-weekdaycontainer span.flatpickr-weekday:first-child{ color: var(--vms-danger) !important; }      /* 일 */
.flatpickr-weekdaycontainer span.flatpickr-weekday:last-child{ color: var(--vms-brand) !important; }        /* 토 */
.dayContainer .flatpickr-day:nth-child(7n+1):not(.selected):not(.startRange):not(.endRange){ color: var(--vms-danger) !important; }  /* 일 */
.dayContainer .flatpickr-day:nth-child(7n):not(.selected):not(.startRange):not(.endRange){ color: var(--vms-brand) !important; }    /* 토 */
/* 공휴일 — onDayCreate 로 .vms-holiday 부여 시 일요일과 동일하게 빨강 강조 */
.dayContainer .flatpickr-day.vms-holiday:not(.selected):not(.startRange):not(.endRange){ color: var(--vms-danger) !important; font-weight: 700 !important; }