@CHARSET "UTF-8";

/* ===== 왼쪽 메뉴 전용 스타일 ===== */

/* ===========================================================
   1) 레이아웃 (전역: 라이트/다크 공통)
   =========================================================== */
@media (min-width: 768px) {
	.navbar-default.sidebar {
		position:fixed;
		top:0;
		width:240px;
		height:100vh;
		z-index:1030;
		overflow-y:auto;
		overflow-x:hidden;
		scrollbar-width:thin;                 /* Firefox */
		scrollbar-color:transparent transparent;
	}
	/* sb-admin의 '#page-wrapper{margin:0 0 0 200px}'를 확실히 이기도록 우선순위 높임 */
	body #page-wrapper { margin-left:240px; }

	/* 스크롤바 자동 숨김: 평소 투명, 사이드바 호버 시에만 표시 */
	.navbar-default.sidebar::-webkit-scrollbar { width:8px; }
	.navbar-default.sidebar::-webkit-scrollbar-thumb { background-color:transparent; border-radius:4px; }
	.navbar-default.sidebar:hover { scrollbar-color:rgba(255,255,255,.28) transparent; }
	.navbar-default.sidebar:hover::-webkit-scrollbar-thumb { background-color:rgba(255,255,255,.22); }
	.navbar-default.sidebar::-webkit-scrollbar-thumb:hover { background-color:rgba(255,255,255,.4); }
}

/* ===========================================================
   2) 라이트 테마 (기본 / 라이온미)
   =========================================================== */
.navbar.navbar-default.navbar-static-top,
.navbar-default.sidebar,
.sidebar-nav.navbar-default,
#side-menu { background-color:#f9f9fa; }

#side-menu a { color:#434c5f; }
#side-menu > li > a { border-bottom:1px solid #e3e6ea; font-size:13px; }
#side-menu .nav-second-level a,
#side-menu .nav-third-level a { border:none; font-size:12px; }
#side-menu a:hover { color:#4b83f1; }

/* 맨 윗칸 텍스트 로고 (라이트) */
#side-menu > li.dropdown > .menu-logo {
	display:block;
	width:100%;
	padding:16px 18px;
	background-color:#2f5fa6;
	color:#fff;
	font-size:16px;
	font-weight:bold;
	letter-spacing:.5px;
	text-align:center;
	cursor:pointer;
}
/* 접속중 칸 (라이트) */
#side-menu > li.dropdown > a#myInfo,
#side-menu > li.dropdown > a#myInfo:hover {
	background-color:#5b85c5;
	color:#fff;
}
.sidebar:not(.sidebar-dark) #side-menu > li.dropdown > a#myInfo span { color:#fff !important; }
#myInfo .glyphicon-arrow-right {
	background-color:rgba(255,255,255,.22);
	padding:4px 8px;
	border-radius:4px;
	transition:background .15s;
}
#myInfo:hover .glyphicon-arrow-right { background-color:rgba(255,255,255,.45); }

/* ===========================================================
   3) 다크 네이비 테마 (맘보 전용: .sidebar-dark)
      라이온미(갈색 인라인 글씨)는 영향 없음
   =========================================================== */

/* 배경: 라이트 규칙(.navbar-default.sidebar, 특이도 0,2,0)을 이기도록 바깥 박스 선택자 특이도 높임 */
.navbar-default.sidebar.sidebar-dark,
.sidebar-dark .sidebar-nav.navbar-default,
.sidebar-dark #side-menu { background-color:#28324e; }

/* 메뉴 글씨 */
.sidebar-dark #side-menu a { color:#c5ccdb; }

/* 상위 메뉴 좌측 정렬: 로고/프로필 카드(좌우 여백 14~18px)와 시작선 맞춤 */
.sidebar-dark #side-menu > li > a { padding-left:18px; }

/* 구분선 제거: 깔끔한 한 덩어리 느낌 (sb-admin의 #e7e7e7 선 포함 모두 제거) */
.sidebar-dark #side-menu > li > a,
.sidebar-dark .sidebar-nav ul li,
.sidebar-dark #side-menu li { border-bottom:none; }

/* 즐겨찾기 그룹 아래에만 구분선: 좌우 여백 + 연한 선 + 아래 간격 */
.sidebar-dark #side-menu > li.fav-group {
	position:relative;
	margin-bottom:14px;
}
.sidebar-dark #side-menu > li.fav-group::after {
	content:"";
	position:absolute;
	left:16px;
	right:16px;
	bottom:0;
	height:1px;
	background:rgba(255,255,255,.09);
}

/* 하위 메뉴: 살짝 어두운 배경 + 흐린 글씨 */
.sidebar-dark #side-menu .nav-second-level { background-color:rgba(0,0,0,.18); }
.sidebar-dark #side-menu .nav-second-level a,
.sidebar-dark #side-menu .nav-third-level a { color:#9aa3ba; }

/* 호버 */
.sidebar-dark #side-menu a:hover {
	color:#fff;
	background-color:rgba(255,255,255,.06);
}

/* 펼침 캐럿: 카드와 동일한 글리피콘 셰브론, 회전 애니메이션 (접힘=아래, 펼침=위로 회전) */
.sidebar-dark #side-menu .fa.arrow:before {
	font-family:'Glyphicons Halflings';
	content:"\e114";   /* chevron-down */
	font-size:10px;
	display:inline-block;
	transition:transform .15s;
}
.sidebar-dark #side-menu .active > a > .fa.arrow:before {
	transform:rotate(180deg);
}

/* 현재 위치(활성) 강조: 둥근 파란 박스 + 좌우 안쪽 여백 (mockup 스타일) */
.sidebar-dark #side-menu a.active {
	background-color:#378add;
	color:#fff;
	border-radius:8px;
}
/* 여백(10px)만큼 글자 시작선이 밀리지 않게 padding 보정 */
.sidebar-dark #side-menu > li > a.active {
	margin:0 10px;
	padding-left:8px;   /* 기본 18px - 여백 10px */
}
.sidebar-dark #side-menu .nav-second-level a.active,
.sidebar-dark #side-menu .nav-third-level a.active {
	margin:0 10px;
	padding-left:27px;  /* 기본 37px - 여백 10px */
}
/* 즐겨찾기 별: li 기준 절대위치로 고정 → active 여백에도 안 밀림 */
.sidebar-dark #side-menu .nav-second-level li { position:relative; }
/* sb-admin의 .nav>li>a{position:relative} 때문에 별 기준이 a로 잡히므로 static으로 되돌림 */
.sidebar-dark #side-menu .nav-second-level a { position:static; }
.sidebar-dark #side-menu .nav-second-level a > span.glyphicon-star-empty,
.sidebar-dark #side-menu .nav-second-level a > span.glyphicon-star {
	position:absolute;
	right:16px;
	top:50%;
	transform:translateY(-50%);
	float:none !important;
}
.sidebar-dark #side-menu .nav-second-level a > span.glyphicon-star-empty:hover,
.sidebar-dark #side-menu .nav-second-level a > span.glyphicon-star:hover {
	transform:translateY(-50%) scale(1.15);
}

/* NEW 배지: 별 왼쪽에 고정 (li 기준 절대위치) */
.sidebar-dark #side-menu .nav-second-level a > span.new_text {
	position:absolute;
	right:40px;
	top:50%;
	transform:translateY(-50%);
}

/* --- 로고: 좌측정렬, GROUPWARE 연한 강조 --- */
.sidebar-dark #side-menu > li.dropdown > .menu-logo {
	background:transparent;
	color:#fff;
	text-align:left;
	font-size:17px;
	font-weight:600;
	letter-spacing:.3px;
	padding:18px 18px 12px;
}
.sidebar-dark #side-menu > li.dropdown > .menu-logo span {
	color:#7f9fd6;
	font-weight:400;
}

/* --- 프로필 카드(접속중 칸): 2줄 flex 레이아웃 --- */
.sidebar-dark #side-menu > li.dropdown > a#myInfo,
.sidebar-dark #side-menu > li.dropdown > a#myInfo:hover {
	display:flex;
	align-items:center;
	gap:10px;
	background-color:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.10);
	border-radius:12px;
	margin:0 14px 12px;
	padding:11px 12px;
	color:#fff;
}
/* 아바타(이름 첫 글자) */
.sidebar-dark #myInfo .profile-avatar {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	width:34px;
	height:34px;
	border-radius:50%;
	background:#378add;
	color:#fff !important;
	font-weight:600;
	font-size:13px;
}
/* 이름/상태 2줄 묶음 */
.sidebar-dark #myInfo .profile-info {
	display:flex;
	flex-direction:column;
	flex:1;
	min-width:0;
	line-height:1.35;
}
.sidebar-dark #myInfo .profile-name {
	font-size:13px;
	font-weight:600;
	color:#fff !important;
}
.sidebar-dark #myInfo .profile-status {
	font-size:11px;
	color:#8a94ad !important;
}
/* 녹색 접속 상태점 */
.sidebar-dark #myInfo .status-dot {
	display:inline-block;
	width:6px;
	height:6px;
	border-radius:50%;
	background:#5dcaa5;
	margin-right:5px;
	vertical-align:middle;
}
/* 펼침 표시 셰브론 (카드 전체가 팝업 토글) */
.sidebar-dark #myInfo .profile-caret {
	flex-shrink:0;
	color:#8a94ad;
	font-size:12px;
	transition:color .15s, transform .15s;
}
.sidebar-dark #side-menu > li.dropdown > a#myInfo:hover .profile-caret { color:#fff; }
.sidebar-dark #side-menu > li.dropdown.open > a#myInfo .profile-caret { transform:scaleX(-1); }

/* ===========================================================
   4) 지점선택 팝업(드롭다운) 다크 스타일 (맘보 전용)
      흰색 버튼 인라인 스타일을 !important로 덮어씀
   =========================================================== */
.sidebar-dark .dropdown-menu {
	background-color:#2e3a58 !important;
	border:1px solid rgba(255,255,255,.10);
	border-radius:12px;
	padding:8px !important;
	box-shadow:0 10px 28px rgba(0,0,0,.4);
	min-width:212px;
}
/* 항목 공통 (버튼/링크) */
.sidebar-dark .dropdown-menu .dropdown-item {
	background-color:transparent !important;
	color:#c5ccdb !important;
	border-radius:8px !important;
	padding:8px 12px !important;
	margin:1px 0;
	transition:background .12s, color .12s;
}
.sidebar-dark .dropdown-menu .dropdown-item:hover {
	background-color:rgba(255,255,255,.08) !important;
	color:#fff !important;
}
.sidebar-dark .dropdown-menu .dropdown-item .glyphicon,
.sidebar-dark .dropdown-menu .dropdown-item .fa { color:#8a94ad; margin-right:2px; }
.sidebar-dark .dropdown-menu .dropdown-item:hover .glyphicon,
.sidebar-dark .dropdown-menu .dropdown-item:hover .fa { color:#fff; }
/* 현재 지점 파란 강조 */
.sidebar-dark .dropdown-menu .dropdown-item.current-branch,
.sidebar-dark .dropdown-menu .dropdown-item.current-branch:hover {
	background-color:#378add !important;
	color:#fff !important;
}
.sidebar-dark .dropdown-menu .dropdown-item.current-branch .glyphicon,
.sidebar-dark .dropdown-menu .dropdown-item.current-branch .fa { color:#fff; }
/* 구분선 */
.sidebar-dark .dropdown-menu .divider { background-color:rgba(255,255,255,.09); margin:8px 4px; }
/* 섹션 라벨 */
.sidebar-dark .dropdown-menu .dropdown-label {
	color:#7f8aa6;
	font-size:11px;
	font-weight:600;
	letter-spacing:.3px;
	padding:6px 12px 4px;
}
/* 로그아웃: 빨강 */
.sidebar-dark .dropdown-menu .logout-item,
.sidebar-dark .dropdown-menu .logout-item:hover,
.sidebar-dark .dropdown-menu .logout-item .glyphicon,
.sidebar-dark .dropdown-menu .logout-item:hover .glyphicon { color:#e2585b !important; }
.sidebar-dark .dropdown-menu .logout-item:hover { background-color:rgba(226,88,91,.12) !important; }

/* ===========================================================
   5) 즐겨찾기 별 아이콘 / NEW 배지 / 메모확인 모달
      (include-left.jspf 인라인 <style>에서 이전)
   =========================================================== */
span.glyphicon-star-empty,
span.glyphicon-star {
	width:15px; height:15px;
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	vertical-align:-2px;
	cursor:pointer;
	transition:transform .15s;
}
span.glyphicon-star-empty:before,
span.glyphicon-star:before { content:""; display:none; }
span.glyphicon-star-empty {
	background-image: var(--icon-star-outline);
}
span.glyphicon-star {
	background-image: var(--icon-star-fill);
}
span.glyphicon-star-empty:hover,
span.glyphicon-star:hover { transform:scale(1.15); }
/* #side-menu로 한정: 개별 페이지(예: 합격생목록)의 span.new_text{color:red}가
   전역 사이드바 배지를 덮어쓰지 않도록 ID 특이도로 보호 */
#side-menu span.new_text {
	display: inline-block;
	background-color: #3a72bf;
	color: #fff;
	font-style: normal;
	font-weight: 700;
	font-size: 9px;
	line-height: 1;
	letter-spacing: .3px;
	text-transform: uppercase;
	padding: 3px 6px;
	border-radius: 5px;
	vertical-align: middle;
}
span.badge.badge-warning {
	background-color:#FFC107;
	padding:1px 5px;
	margin-left:3px;
}

/* ===== 상담예약 메모확인 모달 (다크) ===== */
#memoModalOverlay {
	position:fixed; inset:0;
	background:rgba(8,12,22,.55);
	display:flex; align-items:center; justify-content:center;
	z-index:3000;
}
#memoModalOverlay .memo-modal {
	width:560px; max-width:92vw;
	max-height:86vh;
	display:flex; flex-direction:column;
	background:#1f2740;
	border:1px solid rgba(255,255,255,.08);
	border-radius:16px;
	box-shadow:0 24px 64px rgba(0,0,0,.55);
	color:#e8ecf5;
	overflow:hidden;
}
#memoModalOverlay .memo-modal-header {
	display:flex; align-items:center;
	padding:18px 20px 16px;
}
#memoModalOverlay .memo-modal-icon {
	display:inline-flex; align-items:center; justify-content:center;
	width:38px; height:38px; flex-shrink:0;
	margin-right:12px;
	border-radius:10px;
	background:rgba(55,138,221,.18);
	color:#5b9be8; font-size:16px;
}
#memoModalOverlay .memo-modal-titlewrap { flex:1; min-width:0; line-height:1.3; }
#memoModalOverlay .memo-modal-title { font-size:16px; font-weight:700; color:#fff; }
#memoModalOverlay .memo-modal-subtitle { font-size:12px; color:#8a94ad; margin-top:2px; }
#memoModalOverlay .memo-modal-close {
	flex-shrink:0; border:none; background:transparent;
	color:#8a94ad; font-size:20px; line-height:1; cursor:pointer;
	width:30px; height:30px; border-radius:8px;
	transition:background .12s, color .12s;
}
#memoModalOverlay .memo-modal-close:hover { background:rgba(255,255,255,.08); color:#fff; }
#memoModalOverlay .memo-modal-body {
	padding:0 14px;
	overflow-y:auto;
	scrollbar-width:thin;
	scrollbar-color:rgba(255,255,255,.22) transparent;
}
#memoModalOverlay .memo-modal-body::-webkit-scrollbar { width:8px; }
#memoModalOverlay .memo-modal-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18); border-radius:4px; }
#memoModalOverlay .memo-modal-body::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.3); }
#memoModalOverlay table.memo-table { width:100%; border-collapse:collapse; }
#memoModalOverlay table.memo-table th {
	position:sticky; top:0;
	background:#1f2740;
	text-align:left; font-weight:400; font-size:12px; color:#7f8aa6;
	padding:8px 10px;
}
#memoModalOverlay table.memo-table td {
	padding:11px 10px; font-size:13px; border:none;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#memoModalOverlay table.memo-table tbody tr { border-radius:8px; }
#memoModalOverlay table.memo-table tbody tr:nth-child(even) td { background:rgba(255,255,255,.025); }
#memoModalOverlay table.memo-table .col-name { color:#fff; font-weight:700; }
#memoModalOverlay table.memo-table .col-phone { color:#e8ecf5; font-weight:700; }
#memoModalOverlay table.memo-table .col-manager { color:#aab3c6; }
#memoModalOverlay table.memo-table .col-date { color:#8a94ad; }
#memoModalOverlay table.memo-table .manager-badge {
	display:inline-block; padding:3px 9px; border-radius:6px;
	background:rgba(74,165,120,.2); color:#67cf9c; font-size:12px;
}
#memoModalOverlay table.memo-table .memo-empty {
	text-align:center; color:#8a94ad; padding:40px 0; font-size:13px;
}
#memoModalOverlay .memo-modal-footer {
	display:flex; justify-content:flex-end;
	padding:14px 20px 18px;
}
#memoModalOverlay .memo-modal-confirm {
	border:none; background:#378add; color:#fff;
	font-size:13px; font-weight:600;
	padding:9px 24px; border-radius:8px; cursor:pointer;
	transition:background .12s;
}
#memoModalOverlay .memo-modal-confirm:hover { background:#2f78c4; }

/* ===== 비밀번호 변경 모달 (다크, 메모 모달과 동일한 결) ===== */
#modalChangePassword .modal-dialog {
	position:absolute; top:50%; left:50%;
	transform:translate(-50%,-50%);
	margin:0; width:420px; max-width:92vw;
}
#modalChangePassword .modal-content {
	background:#1f2740;
	border:1px solid rgba(255,255,255,.08);
	border-radius:16px;
	box-shadow:0 24px 64px rgba(0,0,0,.55);
	color:#e8ecf5;
	overflow:hidden;
}
#modalChangePassword .pw-modal-header {
	display:flex; align-items:center;
	padding:18px 20px 14px;
}
#modalChangePassword .pw-modal-icon {
	display:inline-flex; align-items:center; justify-content:center;
	width:38px; height:38px; flex-shrink:0; margin-right:12px;
	border-radius:10px; background:rgba(55,138,221,.18);
	color:#5b9be8; font-size:16px;
}
#modalChangePassword .pw-modal-titlewrap { flex:1; min-width:0; line-height:1.3; }
#modalChangePassword .pw-modal-title { font-size:16px; font-weight:700; color:#fff; }
#modalChangePassword .pw-modal-subtitle { font-size:12px; color:#8a94ad; margin-top:2px; }
#modalChangePassword .pw-modal-close {
	flex-shrink:0; border:none; background:transparent;
	color:#8a94ad; font-size:20px; line-height:1; cursor:pointer;
	width:30px; height:30px; border-radius:8px;
	opacity:1; text-shadow:none;
	transition:background .12s, color .12s;
}
#modalChangePassword .pw-modal-close:hover { background:rgba(255,255,255,.08); color:#fff; }
#modalChangePassword .pw-modal-body { padding:6px 20px 4px; }
#modalChangePassword .pw-field { margin-bottom:14px; }
#modalChangePassword .pw-field label {
	display:block; font-size:12px; color:#8a94ad; font-weight:500; margin-bottom:6px;
}
#modalChangePassword .pw-field input {
	width:100%; height:38px; padding:8px 12px;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.12);
	border-radius:8px; color:#e8ecf5; font-size:13px;
	transition:border-color .12s, background .12s;
}
#modalChangePassword .pw-field input:focus {
	outline:none; border-color:#378add; background:rgba(55,138,221,.08);
}
#modalChangePassword .pw-modal-footer {
	display:flex; justify-content:flex-end; gap:8px;
	padding:8px 20px 18px; border:none;
}
#modalChangePassword .pw-btn-cancel {
	border:1px solid rgba(255,255,255,.14); background:transparent;
	color:#c5ccdb; font-size:13px; padding:9px 18px; border-radius:8px; cursor:pointer;
	transition:background .12s;
}
#modalChangePassword .pw-btn-cancel:hover { background:rgba(255,255,255,.06); }
#modalChangePassword .pw-btn-confirm {
	border:none; background:#378add; color:#fff;
	font-size:13px; font-weight:600; padding:9px 22px; border-radius:8px; cursor:pointer;
	transition:background .12s;
}
#modalChangePassword .pw-btn-confirm:hover { background:#2f78c4; }