@charset "utf-8";
/* ==========================================================================
   관리자 상단 GNB (좌측 사이드바 → 상단 가로 메뉴 전환)
   - top.jsp 의 메뉴 마크업은 그대로 두고 표현만 바꾼다.
     (메뉴 li/ul 의 id 구조를 유지해야 admin_menu_config 노출제어가 계속 동작함)
   - 시안 반영: 대분류 없이 하위메뉴를 1단 평면으로 노출.
     단 '환경설정'(.gnb-dropdown) 만 항목이 많아 드롭다운으로 유지(마지막 메뉴 오른쪽에 배치).
   - 상단 유틸리티 바(navbar)는 top.jsp 에서 주석처리 → GNB 가 최상단(top:0)
   ⚠ 특이도 주의: templateHtml.jsp 가 admin-common.css / style.css / template/css/layout.css 를
     나중에 로드하므로 본 파일은 templateHtml.jsp 뒤에서 로드하며,
     경합 속성은 .wrapper 접두사 + !important 로 덮는다.
   ========================================================================== */

/* ===== 사이드바 컨테이너 → 상단 바 ===== */
.fixed-sidebar-left {
	position: fixed;
	top: 0 !important;
	left: 0;
	width: 100% !important;
	height: 64px !important;
	background-color: #0f172a !important;
	z-index: 1020;
	overflow: visible !important;
	box-shadow: 0 2px 6px rgba(0,0,0,0.18);
	transition: none;
	display: flex;
	align-items: center;
}

/* 사이드바 시절의 폭 제어 클래스 무력화
   - .sidebar-hover    : 마우스오버 시 width:225px !important (layout.css)
   - .slide-nav-toggle : 접힘 상태 width:44px !important (layout.css) */
.sidebar-hover .fixed-sidebar-left,
.slide-nav-toggle .fixed-sidebar-left,
.wrapper.sidebar-hover .fixed-sidebar-left,
.wrapper.slide-nav-toggle .fixed-sidebar-left {
	width: 100% !important;
	left: 0 !important;
	overflow-x: visible !important;
	overflow-y: visible !important;
}

/* ===== GNB 좌측 로고 (시안: EL 이엘산업) ===== */
.fixed-sidebar-left .gnb-logo {
	flex: 0 0 auto;
	padding: 0 22px 0 24px;
	white-space: nowrap;
}
.fixed-sidebar-left .gnb-logo a {
	display: inline-block;
	color: #fff;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -1px;
	text-decoration: none;
	line-height: 64px;
}
.fixed-sidebar-left .gnb-logo a span { color: #3b82f6; }
.fixed-sidebar-left .gnb-logo a:hover { color: #fff; }

/* 메뉴 ul 컨테이너 */
.wrapper .fixed-sidebar-left .side-nav.depth_custom {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	/* nicescroll 이 inline 으로 overflow:hidden 을 넣어 드롭다운이 잘리므로 되돌린다 */
	overflow: visible !important;
	padding: 0 4px;
	margin: 0;
	float: none;
	/* 로고·우측영역과 같은 줄에 놓이므로 남는 폭만 차지한다 (width:100% 면 형제를 밀어냄) */
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
	height: 64px;
	list-style: none;
	background: transparent !important;
	box-shadow: none;
}
.fixed-sidebar-left .navigation-header,
.fixed-sidebar-left .tree-controls-wrap { display: none !important; }

/* ===== 1단 평면 전개 =====
   대분류 li 를 display:contents 로 만들어 하위 ul 이 상단바의 직접 항목이 되게 한다.
   (inline display:none 으로 숨기는 메뉴 노출제어는 그대로 동작) */
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li {
	display: contents;
	float: none;
	border: 0 !important;
	background: transparent;
}
/* 대분류 라벨은 평면 모드에서 숨김 */
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li > a { display: none; }

/* 하위 ul → 가로 나열
   ⚠ .gnb-dropdown(환경설정) 은 제외한다. display 에 !important 를 주면
      jQuery 가 넣는 inline display:none 을 이겨서 드롭다운이 항상 열린 채로 남는다. */
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li:not(.gnb-dropdown) > ul {
	display: flex !important;
	align-items: center;
	position: static;
	background: transparent !important;
	padding: 0;
	margin: 0;
	list-style: none;
	box-shadow: none;
	border-radius: 0;
}
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li > ul > li {
	display: block;
	float: none;
	width: auto !important;
	background: transparent !important;
	border: 0 !important;
	position: relative;
}
/* 메뉴 항목 (layout.css 의 padding-left:44px 등 사이드바 규칙을 되돌림) */
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li > ul > li > a {
	display: block;
	padding: 0 15px !important;
	height: 64px;
	line-height: 64px;
	color: #94a3b8 !important;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	background: transparent !important;
}
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li > ul > li > a:hover { color: #fff !important; }
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li > ul > li > a span { color: inherit !important; }

/* 현재 메뉴 강조 (시안: 흰 글자 + 하단 파란 인디케이터) */
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li > ul > li > a.active_important {
	color: #fff !important;
	font-weight: 700;
	background: transparent !important;
}
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li > ul > li > a.active_important::after {
	content: '';
	position: absolute;
	left: 10px; right: 10px; bottom: 0;
	height: 3px;
	background-color: #3b82f6;
	border-radius: 2px 2px 0 0;
}

/* ===== 환경설정: 드롭다운 유지 (마지막 메뉴 바로 오른쪽) ===== */
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li.gnb-dropdown {
	display: block;          /* contents 해제 → 자체가 flex 항목 */
	position: relative;
	flex: 0 0 auto;          /* 마지막 메뉴 바로 오른쪽에 이어 붙는다 */
}
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li.gnb-dropdown > a {
	display: block;
	padding: 0 15px !important;
	height: 64px;
	line-height: 64px;
	color: #94a3b8 !important;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	background: transparent !important;
	cursor: pointer;
}
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li.gnb-dropdown > a:hover,
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li.gnb-dropdown > a.active,
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li.gnb-dropdown > a.active_important { color: #fff !important; }
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li.gnb-dropdown > a i { color: inherit !important; }
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li.gnb-dropdown > a .pull-left,
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li.gnb-dropdown > a .pull-right {
	float: none !important;
	display: inline-block;
	vertical-align: middle;
}
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li.gnb-dropdown > a .pull-right { margin-left: 5px; }
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li.gnb-dropdown > a .clearfix { display: none; }
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li.gnb-dropdown > a i.mr-20 { margin-right: 6px !important; }

/* 환경설정 드롭다운 패널 */
/* display 는 선언하지 않는다 (jQuery slideUp/slideDown 이 제어) */
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li.gnb-dropdown > ul {
	position: absolute;
	top: 64px;
	left: 0;
	right: auto;
	min-width: 210px;
	background: #1e293b !important;
	padding: 6px 0;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 8px 20px rgba(0,0,0,0.28);
	z-index: 1100;
}
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li.gnb-dropdown > ul > li > a {
	height: auto;
	line-height: 1.4;
	padding: 10px 18px !important;
	font-size: 13px;
	color: #cbd5e1 !important;
}
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li.gnb-dropdown > ul > li > a:hover {
	background: #334155 !important;
	color: #fff !important;
}
/* 드롭다운 안에서는 하단 인디케이터 대신 글자만 강조 */
.wrapper .fixed-sidebar-left .side-nav.depth_custom > li.gnb-dropdown > ul > li > a.active_important::after { display: none; }

/* ===== GNB 우측 영역 (로그아웃) ===== */
.fixed-sidebar-left .gnb-right {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 20px 0 10px;
	white-space: nowrap;
	flex: 0 0 auto;
}
.fixed-sidebar-left .gnb-right .gnb-user { color: #cbd5e1; font-size: 13px; }
/* 다크/라이트 토글 스위치 (iOS 형태: 트랙 + 움직이는 노브) */
.fixed-sidebar-left .gnb-right .gnb-theme-switch {
	background: none; border: 0; padding: 0; cursor: pointer; line-height: 1;
	display: inline-flex; align-items: center;
}
.fixed-sidebar-left .gnb-right .switch-track {
	position: relative;
	display: inline-block;
	width: 72px; height: 28px;
	background: #334155;
	border-radius: 999px;
	transition: background 0.25s ease;
	vertical-align: middle;
}
.fixed-sidebar-left .gnb-right .switch-track i {
	position: absolute; top: 50%; transform: translateY(-50%);
	font-size: 13px; line-height: 1; transition: opacity 0.2s ease;
}
.fixed-sidebar-left .gnb-right .ico-sun  { left: 9px;  color: #fbbf24; }
.fixed-sidebar-left .gnb-right .ico-moon { right: 9px; color: #cbd5e1; opacity: 0.45; }
.fixed-sidebar-left .gnb-right .switch-knob {
	position: absolute; top: 3px; left: 3px;
	width: 22px; height: 22px;
	background: #fff; border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	transition: transform 0.25s ease;
}
.fixed-sidebar-left .gnb-right .gnb-theme-switch:hover .switch-track { background: #3f4f68; }

/* 다크모드: 노브가 오른쪽으로 이동 */
:root[data-theme="dark"] .fixed-sidebar-left .gnb-right .switch-track { background: #2563eb; }
:root[data-theme="dark"] .fixed-sidebar-left .gnb-right .switch-knob { transform: translateX(44px); }
:root[data-theme="dark"] .fixed-sidebar-left .gnb-right .ico-sun  { opacity: 0.45; color: #e2e8f0; }
:root[data-theme="dark"] .fixed-sidebar-left .gnb-right .ico-moon { opacity: 1; color: #fff; }
.fixed-sidebar-left .gnb-right a {
	color: #cbd5e1;
	font-size: 13px;
	border: 1px solid #334155;
	border-radius: 5px;
	padding: 6px 12px;
	text-decoration: none;
}
.fixed-sidebar-left .gnb-right a:hover { background: #334155; color: #fff; }
/* 메뉴 ul 이 flex:1 로 남는 폭을 차지하므로 우측영역은 자연히 오른쪽 끝에 붙는다 */

/* ===== 본문 영역 ===== */
/* 좌측 여백 제거 + GNB(64px) 만큼 상단 확보 */
.page-wrapper {
	margin-left: 0 !important;
	padding-top: 86px !important;
}
.wrapper.slide-nav-toggle .page-wrapper,
.wrapper.sidebar-hover .page-wrapper { margin-left: 0 !important; }

/* 좌측메뉴 토글 버튼은 GNB 모드에서 의미가 없으므로 숨김 */
#toggle_nav_btn { display: none !important; }

/* 모바일 햄버거 버튼: 데스크톱에서는 숨김 (모바일 미디어쿼리에서만 노출) */
.fixed-sidebar-left .gnb-right .gnb-mobile-toggle { display: none; }

/* ===== 모바일 (≤768px) =====
   데스크톱의 가로 평면 전개는 항목이 너무 많아 좁은 화면에서 겹친다.
   → 상단 바에는 로고 + 우측 유틸(테마토글/로그아웃) + 햄버거만 남기고,
     메뉴(.side-nav)는 바 아래로 세로 드롭다운 패널(스크롤)로 전환한다.
   데스크톱 레이아웃은 건드리지 않는다. */
@media (max-width: 768px) {
	/* 모바일: GNB 아래 본문 상단 빈 공간 축소 (모든 관리 페이지 공통)
	   page-wrapper 의 padding-top(86px)이 데스크톱 GNB 높이 기준이라 모바일 GNB(64px)에선 22px 여분 발생 → 64px 로 맞춤 */
	.page-wrapper { padding-top: 64px !important; }
	.container-fluid.pt-25 { padding-top: 6px !important; }
	#projectList .page-header-el { margin-top: 0 !important; }
	#projectList .page-title { margin-top: 0 !important; }

	/* 템플릿 layout.css 가 모바일에서 사이드바를 화면 밖으로 숨기려 margin-left:-225px
	   를 적용한다. GNB 모드에서는 항상 화면에 붙어 있어야 하므로 되돌린다. */
	.fixed-sidebar-left,
	.wrapper .fixed-sidebar-left,
	.wrapper.slide-nav-toggle .fixed-sidebar-left,
	.wrapper.sidebar-hover .fixed-sidebar-left {
		margin-left: 0 !important;
		left: 0 !important;
		width: 100% !important;
	}
	/* --- 상단 바: 로고 왼쪽, 유틸+햄버거 오른쪽 --- */
	.fixed-sidebar-left .gnb-logo { padding: 0 10px; }
	.fixed-sidebar-left .gnb-logo a { font-size: 18px; }
	.fixed-sidebar-left .gnb-right {
		margin-left: auto;          /* 메뉴가 흐름에서 빠지므로 우측으로 밀어붙임 */
		gap: 8px;
		padding: 0 8px 0 6px;
	}
	.fixed-sidebar-left .gnb-right .gnb-user { display: none; }
	/* 테마 스위치 축소 (좁은 폭에서 겹침 방지) */
	.fixed-sidebar-left .gnb-right .switch-track { width: 52px; height: 24px; }
	.fixed-sidebar-left .gnb-right .switch-knob { width: 18px; height: 18px; top: 3px; left: 3px; }
	:root[data-theme="dark"] .fixed-sidebar-left .gnb-right .switch-knob { transform: translateX(28px); }
	.fixed-sidebar-left .gnb-right .ico-sun  { left: 7px; }
	.fixed-sidebar-left .gnb-right .ico-moon { right: 7px; }
	.fixed-sidebar-left .gnb-right a { padding: 5px 9px; font-size: 12px; }
	/* 햄버거 노출 */
	.fixed-sidebar-left .gnb-right .gnb-mobile-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		color: #fff;
		font-size: 24px;
		line-height: 1;
		padding: 4px 4px;
		cursor: pointer;
	}
	.fixed-sidebar-left.gnb-mobile-open .gnb-right .gnb-mobile-toggle { color: #3b82f6; }

	/* --- 메뉴: 세로 드롭다운 패널 (기본 숨김) --- */
	.wrapper .fixed-sidebar-left .side-nav.depth_custom {
		display: none;
		position: absolute;
		top: 64px;
		left: 0;
		right: 0;
		width: 100% !important;
		/* nicescroll 이 인라인으로 height/overflow 를 강제하므로 !important 로 덮는다 */
		height: auto !important;
		max-height: calc(100vh - 64px) !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		flex-direction: column;
		align-items: stretch;
		flex-wrap: nowrap;
		padding: 4px 0;
		background: #0f172a !important;
		box-shadow: 0 8px 20px rgba(0,0,0,0.35);
	}
	/* 햄버거 열림 상태에서만 패널 노출 */
	.wrapper .fixed-sidebar-left.gnb-mobile-open .side-nav.depth_custom { display: flex; }

	/* 평면 하위메뉴(비-드롭다운) → 세로 스택 (flex-shrink 0 으로 압축 방지) */
	.wrapper .fixed-sidebar-left .side-nav.depth_custom > li:not(.gnb-dropdown) > ul {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		flex: 0 0 auto;
	}
	.wrapper .fixed-sidebar-left .side-nav.depth_custom > li.gnb-dropdown { flex: 0 0 auto; }
	.wrapper .fixed-sidebar-left .side-nav.depth_custom > li > ul > li { width: 100% !important; flex: 0 0 auto; }
	.wrapper .fixed-sidebar-left .side-nav.depth_custom > li > ul > li > a {
		height: auto;
		line-height: 1.4;
		padding: 12px 20px !important;
		font-size: 14px;
		border-bottom: 1px solid rgba(255,255,255,0.06);
	}
	/* 활성 표시: 하단 바 → 좌측 세로 바 */
	.wrapper .fixed-sidebar-left .side-nav.depth_custom > li > ul > li > a.active_important::after {
		left: 0;
		right: auto;
		top: 0;
		bottom: 0;
		width: 3px;
		height: auto;
		border-radius: 0;
	}

	/* 환경설정 드롭다운: 세로 흐름에 맞게 인라인 전개 */
	.wrapper .fixed-sidebar-left .side-nav.depth_custom > li.gnb-dropdown { width: 100%; }
	.wrapper .fixed-sidebar-left .side-nav.depth_custom > li.gnb-dropdown > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: auto;
		line-height: 1.4;
		padding: 12px 20px !important;
		font-size: 14px;
		border-bottom: 1px solid rgba(255,255,255,0.06);
	}
	.wrapper .fixed-sidebar-left .side-nav.depth_custom > li.gnb-dropdown > a .pull-right { margin-left: auto; }
	.wrapper .fixed-sidebar-left .side-nav.depth_custom > li.gnb-dropdown > ul {
		position: static;
		width: 100%;
		min-width: 0;
		padding: 0;
		border-radius: 0;
		box-shadow: none;
		background: #16213a !important;
	}
	.wrapper .fixed-sidebar-left .side-nav.depth_custom > li.gnb-dropdown > ul > li > a {
		padding: 11px 20px 11px 34px !important;
	}
}

/* ===== 페이지 배경 (라이트): 리스트/카드 제외한 바탕색 ===== */
body, .wrapper, .page-wrapper { background: #f8fafc !important; }