/* =====================================================
   THM Design System — CSS Variables (Design Tokens)
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

:root {
	/* 배경 계층 */
	--bg-base:     #f1f5f9;   /* 밝은 회백색 */
	--bg-surface:  #ffffff;   /* 카드/패널 배경 */
	--bg-elevated: #f8fafc;   /* 호버 시 올라오는 느낌 */
	--bg-overlay:  rgba(15, 23, 42, 0.4); /* 모달 오버레이 */

	/* 테두리 */
	--border:        #e2e8f0;   /* 연회색 */
	--border-subtle: rgba(226, 232, 240, 0.6);

	/* 텍스트 */
	--text-primary:   #1e293b;   /* 딥 네이비 */
	--text-secondary: #475569;
	--text-muted:     #94a3b8;

	/* 강조색 */
	--accent:        #1e40af;   /* 네이비 블루 */
	--accent-hover:  #1d4ed8;
	--accent-subtle: rgba(30, 64, 175, 0.08);

	/* 상태 색상 */
	--color-success: #059669;   /* 에메랄드 */
	--color-warning: #d97706;   /* 앰버 */
	--color-danger:  #dc2626;   /* 로즈 */
	--color-purple:  #7c3aed;   /* 퍼플 */

	/* 성공/경고/위험 subtle 배경 */
	--success-bg: rgba(5, 150, 105, 0.08);
	--warning-bg: rgba(217, 119, 6, 0.08);
	--danger-bg:  rgba(220, 38, 38, 0.08);
	--purple-bg:  rgba(124, 58, 237, 0.08);

	/* 그림자 */
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

	/* 전환 */
	--transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-bounce: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

	/* 인풋/버튼 전용 배경 */
	--input-bg: #ffffff;
	--btn-bg: #ffffff;
	--btn-hover-bg: #f8fafc;
}

/* =====================================================
   Reset & Base
   ===================================================== */
* {
	box-sizing: border-box;
	font-family: 'Outfit', 'Noto Sans KR', sans-serif;
	font-weight: 400;
	-ms-overflow-style: none;
}

body {
	margin: 0;
	background-color: var(--bg-base);
	color: var(--text-primary);
	min-height: 100vh;
}

p {
	font-size: 16px;
	line-height: 1.5em;
}

h1, h2, h3, h4, p {
	margin: 0;
}

a {
	color: var(--text-primary);
	line-height: 1.5em;
	text-decoration: none;
	cursor: pointer;
}

label {
	line-height: 1.5em;
}

img {
	border: 0;
}

::-webkit-scrollbar,
-moz-scrollbar,
-ms-scrollbar {
	display: none;
}

/* =====================================================
   Form Controls
   ===================================================== */
input[type=text],
input[type=password],
input[type=date],
input[type=number],
select {
	height: 60px;
	padding-left: 55px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background-color: var(--input-bg);
	color: var(--text-primary);
	background-size: 35px;
	background-repeat: no-repeat;
	background-position: left;
	background-position-x: 10px;
	transition: var(--transition);
	outline: none;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=date]:focus,
input[type=number]:focus,
select:focus {
	border-color: var(--accent);
	background-color: var(--accent-subtle);
	box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
}

input[type=button],
input[type=submit],
input[type=reset] {
	border: 1px solid var(--border);
	border-radius: 10px;
	background-color: var(--btn-bg);
	color: var(--text-primary);
	cursor: pointer;
	font-weight: 500;
	transition: var(--transition);
}

input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover {
	background-color: var(--btn-hover-bg);
	border-color: var(--accent);
	color: var(--accent);
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}

input[type=button]:active,
input[type=submit]:active,
input[type=reset]:active {
	transform: translateY(0);
}

/* =====================================================
   Layout — Body Wrapper
   ===================================================== */
body > div {
	position: relative;
	width: 100vw;
	height: auto;
	min-height: calc(100vh - 51px - 60px); /* 헤더와 풋터 높이를 뺀 최소 높이 */
	background-color: var(--bg-base);
}

.titleDiv {
	width: 100%;
	height: auto;
	margin: 0 auto;
	margin-bottom: 15px;
	text-align: center;
}

.titleDiv > h1 {
	padding: 16px 0;
}

.inputDiv {
	width: 100%;
	height: 70px;
}

.inputDiv > .inputDivDiv {
	float: left;
}

.inputDiv > input[type=text],
.inputDiv > input[type=password],
.inputDiv > input[type=date] {
	width: 100%;
}

.addImgBtn {
	border: 1px solid var(--border);
	border-radius: 8px;
	background-image: url(/resources/include/images/add_icon.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 25px;
}

/* =====================================================
   Header
   ===================================================== */
#headerContainer {
	width: 100vw;
	height: 51px;
	position: relative; /* absolute 제거 */
	/* 헤더 네이비 포인트로 변경해 흰색 로고 가독성 확보 */
	background-color: #1e293b;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding: 3px;
	min-height: unset;
	z-index: 100;
}

#headerContainer > #headerDiv {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#headerContainer > #headerDiv > .headerBody {
	width: auto;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 15px;
}

#headerContainer > #headerDiv > .headerBody:first-child > .logoImgDiv {
	width: 160px;
	height: 100%;
	display: flex;
	align-items: center;
}

#headerContainer > #headerDiv > .headerBody:first-child > .logoImgDiv > .logoImg {
	width: 100%;
	height: 30px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#headerContainer > #headerDiv > .headerBody > .bodyText {
	width: auto;
	height: auto;
	text-align: center;
}

#headerContainer > #headerDiv > .headerBody > .bodyText > h2 {
	color: rgba(255, 255, 255, 0.8);
	padding: 9px 0;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: var(--transition);
	display: flex;
	align-items: center;
	gap: 6px;
}

#headerContainer > #headerDiv > .headerBody > .bodyText > h2:hover {
	color: #ffffff;
}

/* Dropdown Menu */
#headerContainer > #headerDiv > .headerBody.dropdown {
	position: relative;
}

#headerContainer > #headerDiv > .headerBody.dropdown > .dropdown-content {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-8px) scale(0.97);
	opacity: 0;
	visibility: hidden;
	background-color: var(--bg-surface);
	min-width: 185px;
	box-shadow: var(--shadow-lg);
	z-index: 1000;
	border-radius: 12px;
	border: 1px solid var(--border);
	overflow: hidden;
	transition: var(--transition-bounce);
}

#headerContainer > #headerDiv > .headerBody.dropdown > .dropdown-content > a {
	color: var(--text-secondary);
	padding: 12px 16px;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	font-size: 14px;
	transition: var(--transition);
}

#headerContainer > #headerDiv > .headerBody.dropdown > .dropdown-content > a i {
	font-size: 16px;
	color: var(--accent);
}

#headerContainer > #headerDiv > .headerBody.dropdown > .dropdown-content > a:hover {
	background-color: var(--bg-elevated);
	color: var(--accent);
	padding-left: 20px;
}

#headerContainer > #headerDiv > .headerBody.dropdown:hover > .dropdown-content {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0) scale(1);
}

/* =====================================================
   Footer
   ===================================================== */
#footerContainer {
	width: 100vw;
	height: auto;
	position: relative; /* absolute 제거 */
	background-color: var(--bg-surface);
	border-top: 1px solid var(--border);
	padding: 12px 0;
	min-height: unset;
}

#footerContainer > #footerDiv {
	width: 100%;
	height: auto;
}

#footerContainer > #footerDiv > .footerBody {
	width: 100%;
	height: 15px;
	text-align: center;
}

#footerContainer > #footerDiv > .footerBody > p {
	color: var(--text-muted);
	font-size: 12px;
	line-height: 1.25em;
}

#footerContainer > #footerDiv > .footerBody > p:last-child > strong {
	color: var(--accent);
	cursor: pointer;
}

/* =====================================================
   Body
   ===================================================== */
#body {
	position: relative;
	height: 100%;
}

#body > .bodyDiv {
	width: 100%;
	height: auto;
}

/* =====================================================
   Modal — 비밀번호 확인 모달 (다크 전환)
   ===================================================== */
#pwdModalContainer {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100vw;
	height: 100vh;
	background-color: var(--bg-overlay);
	/* 부드러운 페이드인 */
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

#pwdModalContainer > #modalDiv {
	width: 420px;
	height: auto;
	margin: 0 auto;
	margin-top: 25vh;
	padding: 28px 24px;
	border-radius: 16px;
	/* 다크 카드 배경 */
	background-color: var(--bg-surface);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-lg);
	animation: modalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideIn {
	from {
		opacity: 0;
		transform: translateY(-20px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

#pwdModalContainer > #modalDiv > #modalForm {
	width: 100%;
	height: 100%;
}

#pwdModalContainer > #modalDiv > #modalForm > .inputDiv:last-child {
	height: 60px;
}

#pwdModalContainer > #modalDiv > #modalForm > .inputDiv:last-child > .inputDivDiv {
	width: 49%;
	height: 100%;
}

#pwdModalContainer > #modalDiv > #modalForm > .inputDiv:last-child > .inputDivDiv:first-child {
	margin-right: 2%;
}

#pwdModalContainer > #modalDiv > #modalForm > .inputDiv:last-child > .inputDivDiv > input[type=button] {
	width: 100%;
	height: 100%;
}

/* =====================================================
   Datepicker
   ===================================================== */
.ui-datepicker {
	position: absolute;
	z-index: 9999 !important;
}

.ui-datepicker select {
	padding-left: 0;
	border: 0;
	border-radius: 0;
	background-color: white;
	background-size: 0;
	background-repeat: no-repeat;
	background-position: left;
	background-position-x: 0;
}

#ui-datepicker-div {
	height: auto;
}

#ui-datepicker-div select {
	height: 27px;
}

/* =====================================================
   공통 유틸
   ===================================================== */
.noData {
	text-align: center;
	color: var(--text-muted);
	padding: 20px 0;
}

/* =====================================================
   Toast 알림 시스템
   ===================================================== */
#thm-toast-container {
	position: fixed;
	bottom: 28px;
	right: 28px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}

.thm-toast {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 300px;
	max-width: 420px;
	padding: 14px 18px;
	border-radius: 12px;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-lg);
	color: var(--text-primary);
	font-size: 14px;
	font-weight: 500;
	pointer-events: all;
	animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	position: relative;
	overflow: hidden;
}

.thm-toast::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	border-radius: 12px 0 0 12px;
}

.thm-toast.toast-success::before { background: var(--color-success); }
.thm-toast.toast-error::before   { background: var(--color-danger); }
.thm-toast.toast-warning::before { background: var(--color-warning); }
.thm-toast.toast-info::before    { background: var(--accent); }

.thm-toast .toast-icon {
	font-size: 18px;
	flex-shrink: 0;
}

.thm-toast.toast-success .toast-icon { color: var(--color-success); }
.thm-toast.toast-error   .toast-icon { color: var(--color-danger); }
.thm-toast.toast-warning .toast-icon { color: var(--color-warning); }
.thm-toast.toast-info    .toast-icon { color: var(--accent); }

.thm-toast .toast-msg {
	flex: 1;
	line-height: 1.4;
}

.thm-toast .toast-close {
	font-size: 16px;
	color: var(--text-muted);
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	line-height: 1;
	transition: var(--transition);
}

.thm-toast .toast-close:hover {
	color: var(--text-primary);
}

.thm-toast-exit {
	animation: toastSlideOut 0.3s ease forwards;
}

@keyframes toastSlideIn {
	from {
		opacity: 0;
		transform: translateX(40px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes toastSlideOut {
	from {
		opacity: 1;
		transform: translateX(0);
		max-height: 100px;
		margin-bottom: 0;
	}
	to {
		opacity: 0;
		transform: translateX(40px);
		max-height: 0;
		margin-bottom: -10px;
		padding: 0;
	}
}

/* =====================================================
   반응형
   ===================================================== */
@media all and (max-width: 767px) {
	#thm-toast-container {
		bottom: 16px;
		right: 16px;
		left: 16px;
	}
	.thm-toast {
		min-width: unset;
		max-width: 100%;
	}
}

/* =====================================================
   공지 팝업 컨테이너 (숨김 처리)
   ===================================================== */
#popBg {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	width: 100vw;
	height: 100vh;
	background-color: var(--bg-overlay);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

#popUp {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 380px;
	background-color: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 24px;
	box-shadow: var(--shadow-lg);
	animation: modalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.popUpContents {
	width: 100%;
	text-align: center;
}

.popUpContents:first-child {
	margin-bottom: 20px;
}

.popUpContents p#noticeWarn {
	font-size: 16px;
	color: var(--text-primary);
	font-weight: 500;
	line-height: 1.5;
}

.popUpContents input[type=button] {
	padding: 10px 24px;
	margin: 0 6px;
	border: 1px solid var(--border);
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	transition: var(--transition);
}

.popUpContents input[type=button]#noticePopOkay {
	background-color: var(--accent);
	color: #ffffff;
	border-color: var(--accent);
}

.popUpContents input[type=button]#noticePopOkay:hover {
	background-color: var(--accent-hover);
	border-color: var(--accent-hover);
}