@charset "UTF-8";

@import
	url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-gov.min.css")
	;

:root {
	--app-height: 0px;
	--max-width: 1510px;
	--container: 0 1.5rem;
	--inner: 1.5rem;
	--layout-header-height: 68px;
	--body-color: #333;
	--body-bg-color: #F8F9FC;
	--primary-color: #0056ff;
	--primary-hover: #2547ff;
	--secondary-color: #3F4970;
	--tertiary-color: #6F809A;
	--point-color: #1a94fc;
	--point-color2: #726FEB;
	--point-color3: #457BCB;
	--light-color: #707070; /* 웹접근성 4.5대1(이컬러 이하 안됨!) */
	--active-color: #fd8b40;
	--danger-color: #e70000; /* 오류,금지,삭제 */
	--warning-color: #ffa500; /* 주의 */
	--success-color: #008a1e; /* 성공,진행 */
	--info-color: #2768ff; /* 정보,강조 */
	
	--menu-color: #313859; /* 좌측 기본 메뉴 */
	--menu-dark-color: #11182E; /* 바로가기 등 진한 메뉴 */
	--menu-text-color: #8EA0CF; /* 비활성 메뉴 글자 */
	
	--text-lead: #777;
	--text-red: #E21919;
	--text-pink: #dd3267;
	--text-blue: #4C89FF;
	--text-green: #4F9D3A;
	--text-blueGreen: #1F7886;
	--text-mint: #35B6A2;
	--text-black: #333;
	--text-yellow: #eded09;
	--text-strong: #222222;
	--text-muted: #707070;
	--title-color: #000;
	--lead-color: #000;
	--hr-color: #E2DFDF;
	--line-light: #EEEDED;
	--line-color: #E5E5E5;
	--line-color2: #EEECEC;
	--table-color: #6196B0;
	--table-line-color: #53859D;
	--placeholder: #999;
	--input-color: #ddd;
	--input-radius: 1.2rem;
	--input-radius-sm: 1rem;
	--radius: 1.2rem;
	--radius-sm: 1rem;
	--radius-md: 1.5rem;
	--radius-lg: 2rem;
	--transition: all 0.7s ease;
	--jads-font: "Pretendard GOV", "Pretendard", -apple-system,
		BlinkMacSystemFont, "System UI", Roboto, "Helvetica Neue",
		"Apple SD Gothic Neo", sans-serif;
	--text-lead: #777
}

/* ==================================================================================== */
/* skip-content */
.skip-content {
	position: absolute;
	left: -9999px;
}

/* ==================================================================================== */

/* JADS Responsive Web Standard */
.wrapper {
	min-height: 100vh;
	background: var(--body-bg-color);
}

.site-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	overflow: visible;
}

.skip-navi {
	position: relative;
	z-index: 10000;
}

.skip-wrap a {
	position: absolute;
	top: -40px;
	left: 12px;
	padding: 10px 16px;
	background: var(--jads-sidebar-2);
	color: #FFFFFF;
	font-weight: 700;
	text-decoration: none;
	border-radius: 0 0 8px 8px;
}

.skip-wrap a:focus {
	top: 0;
}

.brand-block {
	display: flex;
	align-items: center;
	gap: 10px;
	height: var(--layout-header-height);
	padding: 0 18px;
	background: var(--menu-color);
	box-sizing: border-box;
}

.brand-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border-radius: var(--radius);
	background: var(--primary-color);
	color: #fff;
	font-weight: 900;
}

.brand-title {
	color: #FFFFFF;
	font-weight: 900;
	white-space: nowrap;
	font-size: 18px;
}

.brand-sub {
	color: #95A4B4;
}

.brand-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.brand-logo {
	display: block;
	width: 140px;
	height: auto;
	object-fit: contain;
}

.brand-sub {
	color: #95A4B4;
	font-size: 12px;
	white-space: nowrap;
}

.layout-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	height: var(--layout-header-height);
	padding: 0 24px;
	background: var(--primary-color);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	box-sizing: border-box;
}

.layout-logo img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.layout-logo span {
	color: #FFFFFF;
	font-size: 18px;
	font-weight: 700;
}

.layout-shortcut {
	width: 100%;
	margin-top: 12px;
	padding: 14px 24px;
	border: 0;
	background: transparent;
	color: #95A4B4;
	text-align: left;
	cursor: pointer;
}

.layout-shortcut:hover, .layout-shortcut:focus {
	background: rgba(255, 255, 255, .08);
	outline: none;
}

.layout-home-menu {
	background: var(--menu-dark-color);
}

.layout-home-menu a {
	display: flex;
	justify-content: space-between;
	width: 100%;
	color: var(--menu-text-color);
	font-weight: 700;
	text-decoration: none;
}

.layout-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.layout-header-inner h1 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: inherit;
}

.layout-user-area {
	display: flex;
	align-items: center;
	gap: 12px;
}

.layout-user-area>span {
	color: #FFFFFF;
}

.layout-logout {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 14px;
	border: 0;
	background: #6F809A;
	color: #FFFFFF;
	font: inherit;
	text-decoration: none;
	border-radius: 8px;
	cursor: pointer;
	transition: all .3s ease;
}

.layout-logout:hover {
	background: #466CB4;
	color: #FFFFFF;
}

.logout-form {
	display: inline-flex;
	margin: 0;
}

.layout-tab-wrap {
	padding: 0 20px;
	background: var(--body-bg-color);
	border-bottom: 1px solid #F3F4F8;
}

.layout-tab-bar {
	display: flex;
	overflow-x: auto;
}

.layout-sub-tab-wrap {
	padding: 0 20px;
	background: var(--body-bg-color);
	border-bottom: 1px solid #F3F4F8;
}

.layout-content {
	flex: 1;
	min-height: 0;
	background: var(--body-bg-color);
	padding-top: 16px;
}

.contents:focus {
	outline: none;
}

body {
	margin: 0;
	background: var(--body-bg-color);
	color: var(--jads-text);
	font-family: var(--jads-font);
}

/* ==================================================================================== */
/* 공통 메뉴 */
.sidebar {
	background: var(--menu-color);
	width: 240px;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	color: #FFFFFF;
	overflow-y: auto;
	border-right: 1px solid var(--menu-color);
}

.sidebar, .sidebar * {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.header {
	background: var(--menu-color);
	color: #FFFFFF;
	min-height: var(--layout-header-height);
	padding: 0 28px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
}

.main {
	margin-left: 240px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	width: auto;
}

@media ( max-width : 1024px) {
	.sidebar {
		width: 220px;
	}
	.main {
		margin-left: 220px;
	}
}

@media ( max-width : 768px) {
	.sidebar {
		position: relative;
		width: 100%;
		height: auto;
	}
	.main {
		margin-left: 0;
	}
	.layout-header-inner, .layout-user-area, .form-row {
		align-items: stretch;
		flex-direction: column;
	}
	.layout-tab-bar, .sub-tab-bar {
		overflow-x: auto;
	}
	.div-main {
		padding: 16px;
	}
}

.menu-section {
	background: var(--menu-color);
	color: var(--menu-text-color);
	font-weight: 700;
	font-size: 15px;
	padding: 14px 24px;
	cursor:rgb(0, 0, 0)r;
	display: flex;
	align-items: center;
	justify-content: space-between;

	border-bottom: 1px solid #485172;
}

.submenu {
	display: none;
}

.submenu a {
	display: block;
	padding: 10px 24px 10px 48px;
	font-size: 15px;
	color: var(--menu-text-color);
	text-decoration: none;

	border-bottom: 1px solid #485172;
}

.submenu a:hover {
	background: rgba(255, 255, 255, 0.08);
}

/* 상위 메뉴 클릭 시 배경색 바뀌지 않도록 */
.menu-section.active {
	background: var(--menu-color) !important;
	color: #FFFFFF !important;
}

/* 서브 메뉴(현재 페이지)만 배경색 유지 */
.submenu a.active {
	background: var(--primary-color) !important;
	color: #FFFFFF !important;
}

.chev {
	transition: transform .2s;
}

.menu-section.open .chev {
	transform: rotate(90deg);
}

.tab-link {
	cursor: pointer;
}

.layout-tab-bar.nav-tabs .tab-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 0 0 auto;
	min-width: auto;
	border: 1px solid var(--input-color);
	border-radius: var(--radius);
	padding: 0 48px;
	font-size: 18px;
	line-height: 50px;
	font-weight: 600;
	color: #333333;
	background-color: #FFFFFF;
	text-decoration: none;
	transition: all .8s ease;
}

.layout-tab-bar.nav-tabs .tab-link:hover, .layout-tab-bar.nav-tabs .tab-active
	{
	color: #FFFFFF;
	background: var(--primary-color);
	border-color: var(--primary-color);
	text-decoration: none;
}

.tab-active {
	font-weight: 600;
}

.nav-tabs {
	display: flex;
	gap: 6px;
	margin: 4px 0;
	white-space: nowrap;
	overflow-x: auto;
}

.nav-tabs a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: auto;
	border: 1px solid var(--input-color);
	border-radius: var(--radius);
	padding: 0 10px;
	font-size: 18px;
	line-height: 50px;
	font-weight: 600;
	color: #333333;
	text-decoration: none;
	transition: all .8s ease;
}

.nav-tabs a:hover, .nav-tabs a.active {
	color: #FFFFFF;
	background: var(--primary-color);
	border-color: var(--primary-color);
	text-decoration: none;
}

.nav-tabs.full a {
	flex-basis: 100%;
}

.nav-tabs.center a {
	justify-content: center;
}

.nav-tabs .ico {
	display: none;
}

.nav-tabs a.tab-disabled {
	color: #FFFFFF !important;
	background-color: #B7B7B9 !important;
	border-color: #B7B7B9 !important;
	cursor: not-allowed;
}

.tab-button:last-child {
	border-right: none;
}

.tab-button:hover {
	background-color: #F3F4F8;
}

.tab-button.red {
	color: #E21919;
}

/* ==================================================================================== */
/* 하위 내비게이션 탭 - 디자인 가이드 적용 */
.layout-sub-tab-wrap {
	padding: 0 20px;
	background: var(--body-bg-color);
	border-bottom: 0;
}

.sub-tab-bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 4px 0;
	white-space: nowrap;
	overflow-x: auto;
}

/* 공통 탭 */
.sub-tab-bar .tab-button {
	border-radius: 30rem !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: auto;
	min-height: 50px;
	padding: 0 20px;
	border: 1px solid var(--input-color);
	border-radius: var(--radius);
	background-color: #000000;
	color: #333333;
	font-family: var(--jads-font);
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: all .7s ease;
}

/* 비활성 탭 */
.sub-tab-bar .tab-button:not(.active) {
	background-color: #FFFFFF;
	border-color: var(--input-color);
	color: #333333;
}

/* 활성 탭 */
.sub-tab-bar .tab-button.active {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: #FFFFFF;
}

/* hover */
.sub-tab-bar .tab-button:not(.active):hover {
	background-color: #F1F6FC;
	border-color: var(--primary-color);
	color: var(--primary-color);
	text-decoration: none;
}

/* 클릭 비활성 상태에서도 디자인은 유지 */
.sub-tab-bar .tab-active-no-click {
	cursor: default;
}

/* 비활성 탭도 가이드 스타일 유지 */
.sub-tab-bar .tab-disabled {
	background-color: #FFFFFF !important;
	border-color: var(--input-color) !important;
	color: #333333 !important;
	cursor: default;
}

/* 탭 선택 비활성화 - 선택 표시 */
.tab-active-no-click {
	pointer-events: none; /* 클릭 금지 */
}

/* ==================================================================================== */
/* 진행상황 */
.progress-bar-wrap {
	width: 100%;
	min-width: 0;
	padding: 3px 4px;
	box-sizing: border-box;
}

.progress-bar-track {
	position: relative;
	width: 100%;
	height: 5px;
	margin: 7px 2px 5px;
	border-radius: 999px;
	background-color: #d9dde7;
}

.progress-bar-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 5px;
	border-radius: 999px;
	background-color: var(--primary-color);
}

.progress-marker {
	position: absolute;
	top: 50%;
	width: 7px;
	height: 7px;
	border: 1px solid #aab0bd;
	background-color: #ffffff;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
}

.progress-marker.active {
	border-color: var(--primary-color);
	background-color: var(--primary-color);
}

.project-detail-progress {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--input-color);
	border-radius: var(--radius);
	background-color: #ffffff;
	box-sizing: border-box;
}

.form-row>.project-detail-progress {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.project-detail-progress .progress-bar-track {
	margin: 10px 4px 8px;
}

.project-detail-progress-labels {
	display: flex;
	justify-content: space-between;
	color: var(--text-muted);
	font-size: 12px;
	line-height: 1;
}

.project-detail-progress-rate {
	margin-top: 8px;
	color: var(--primary-color);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}

.progress-label-row {
	display: flex;
	justify-content: space-between;
	color: var(--text-muted);
	font-size: 11px;
	line-height: 1;
}

.progress-line {
	position: absolute;
	height: 3px;
	background-color: #B7B7B9;
	top: 9px;
	left: 50%;
	right: -50%;
	z-index: 1;
}

.progress-label {
	margin-top: 8px;
	font-size: 12px;
	color: #171F30;
	white-space: nowrap;
}

.project-table-wrap {
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
}

.project-table {
	width: 100%;
	table-layout: fixed;
}

.project-table .project-col-check {
	width: 40px;
}

.project-table .project-col-no {
	width: 55px;
}

.project-table .project-col-type {
	width: 95px;
}

.project-table .project-col-title {
	width: auto;
}

.project-table .project-col-org {
	width: 120px;
}

.project-table .project-col-user {
	width: 90px;
}

.project-table .project-col-date {
	width: 82px;
}

.project-table .project-col-created {
	width: 82px;
}

.project-table .project-col-progress {
	width: 150px;
}

.project-table th, .project-table td {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.project-table .project-progress-cell {
	overflow: hidden;
	white-space: normal;
}

.project-table .progress-timeline {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	padding: 0 4px;
	box-sizing: border-box;
	overflow: hidden;
}

.project-table .progress-stage {
	min-width: 0;
}

.project-table .progress-dot {
	width: 16px;
	height: 16px;
	border-width: 2px;
}

.project-table .progress-line {
	top: 7px;
	height: 2px;
}

.project-table .progress-label {
	max-width: 100%;
	margin-top: 6px;
	font-size: 11px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media ( max-width : 1200px) {
	.project-table .project-col-check {
		width: 36px;
	}
	.project-table .project-col-no {
		width: 48px;
	}
	.project-table .project-col-type {
		width: 78px;
	}
	.project-table .project-col-title {
		width: auto;
	}
	.project-table .project-col-org {
		width: 96px;
	}
	.project-table .project-col-user {
		width: 76px;
	}
	.project-table .project-col-date {
		width: 72px;
	}
	.project-table .project-col-created {
		width: 72px;
	}
	.project-table .project-col-progress {
		width: 150px;
	}
	.project-table th, .project-table td {
		padding-left: 6px;
		padding-right: 6px;
		font-size: 13px;
	}
	.project-table .progress-bar-wrap {
		min-width: 0;
		padding: 3px 4px;
	}
	.project-table .progress-label-row {
		font-size: 10px;
	}
}

/* ==================================================================================== */
/* 본 화면 */
.sub-title {
	font-size: 20px; /* 더 크게 */
	font-weight: 700; /* 굵게 */
	color: #171F30; /* 적당한 진회색 (기존 톤 유지) */
	margin-bottom: 4px; /* 아래 여백도 조금 추가 */
}

/* 전체 */
.div-main {
	max-width: 100%;
	margin: 0 auto;
	background: var(--body-bg-color);
	padding: 0 24px 24px;
}

/* ==================================================================================== */
/* 모달 팝업 */
/* 모달 전체 배경 (뒷배경 어둡게) */
.modal-backdrop {
	position: fixed;
	inset: 0;
	display: none; /* JS에서 flex로 바꿔줌 */
	align-items: center;
	justify-content: center;
	background-color: rgba(15, 23, 42, 0.55); /* 비활성화 배경색 */
	z-index: 1000;
}

/* 모달 패널 */
.modal-panel {
	width: 100%;
	background-color: #FFFFFF;
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(15, 23, 42, 0.35);
	padding: 16px 20px 18px;
	box-sizing: border-box;
}

/* 모달 헤더 */
.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.modal-title {
	font-size: 15px;
	font-weight: 600;
	color: #171F30;
}

.modal-close-btn {
	border: none;
	background: transparent;
	font-size: 16px;
	cursor: pointer;
	color: #B7B7B9;
}

.modal-close-btn:hover {
	color: #797C8E;
}

/* 모달 본문 */
.modal-body {
	margin-top: 4px;
}

.modal-form-row {
	margin-bottom: 16px;
}

/* 모달 버튼 정렬 */
.modal-button-row {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

/* ==================================================================================== */
/* 모달 팝업 - 다이얼로그 */
/* 화면 전체를 덮는 어두운 배경 */
#dialogModal {
	position: fixed;
	inset: 0; /* top:0; right:0; bottom:0; left:0; */
	background-color: rgba(15, 23, 42, 0.35);
	display: none; /* 기본은 숨김 */
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

/* show 클래스가 붙었을 때만 보이도록 */
#dialogModal.show {
	display: flex;
}

.dialog-modal-wrap {
	min-width: 480px;
	padding: 24px 28px;
	background-color: #FFFFFF;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}

/* 팝업 제목 */
.dialog-modal-title {
	font-size: 18px;
	font-weight: 700;
	color: #171F30;
	margin-bottom: 20px;
}

/* 한 줄(라벨 + 입력) */
.dialog-form-row {
	display: flex;
	align-items: center;
	margin-bottom: 14px;
	box-sizing: border-box;
}

/* 라벨 폭 고정해서 정렬 */
.dialog-form-label {
	width: 90px; /* ← 여기 값만 조절하면 제목 폭 전부 같이 움직임 */
	font-size: 14px;
	color: #171F30;
	font-weight: 600;
}

/* 입력 영역: 남은 공간 100% */
.dialog-form-field {
	flex: 1;
}

/* 공통 입력창 스타일 – 표 위 검색창 느낌의 회색 라운드 사각형 */
.dialog-input {
	box-sizing: border-box;
	width: 100%;
	padding: 8px 12px;
	border-radius: 10px;
	border: 1px solid #B7B7B9;
	background-color: #F9F9F9; /* 옅은 회색 배경 */
	font-size: 14px;
	color: #171F30;
	outline: none;
	box-sizing: border-box;
}

.dialog-input:focus {
	border-color: #0056ff; /* 파란 테두리 */
	background-color: #FFFFFF;
	box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35);
}

/* 날짜 입력창도 같은 느낌으로 */
.dialog-input-date {
	box-sizing: border-box;
	padding-right: 10px;
}

/* 비고 */
.dialog-input-note {
	width: 100%;
	box-sizing: border-box;
	min-height: 120px;
	padding: 8px 10px;
	border-radius: 10px;
	box-sizing: border-box;
	resize: vertical;
	overflow: auto;
}

/* 버튼 영역 */
.dialog-modal-actions {
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

/* 모달 - 확인 버튼 */
.date-field {
	display: flex;
	align-items: center;
	gap: 8px;
}

.day-label {
	font-size: 13px;
	color: #797C8E; /* 회색 */
	white-space: nowrap; /* 줄바꿈 방지 */
}

.note-cell {
	max-width: 120px; /* 적당한 가로폭 지정 */
	white-space: nowrap; /* 줄바꿈 방지 */
	overflow: hidden; /* 넘치는 내용 숨기기 */
	text-overflow: ellipsis; /* … 표시 */
}

/* ==================================================================================== */
/* 모달 팝업 - 파일 형식 */
/* 행 전체: label 왼쪽 / select 오른쪽 */
.modal-filekind-row {
	display: flex;
	justify-content: space-between; /* 양 끝 배치 */
	align-items: center;
	width: 100%;
}

/* 선택 박스 wrapper */
.filekind-select-box {
	flex: 0 0 220px; /* 오른쪽 select 고정 폭 */
	display: flex;
	justify-content: flex-end;
}

/* 실제 select 디자인 */
.filekind-select {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #B7B7B9; /* 연한 그레이 테두리 */
	border-radius: 6px;
	background-color: #FFFFFF;
	appearance: none; /* 기본 화살표 제거 */
	background-image:
		url("data:image/svg+xml;utf8,<svg fill='%23666' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center; /* 오른쪽 화살표 */
	background-size: 14px;
	cursor: pointer;
}

/* hover/포커스 효과 */
.filekind-select:hover {
	border-color: #B7B7B9;
}

.filekind-select:focus {
	outline: none;
	border-color: #0056ff; /* 파란 포커스 */
}

/* ==================================================================================== */
/* 공통 input 스타일을 그대로 사용하는 select */
.combobox-list {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background:
		url('data:image/svg+xml;utf8,<svg fill="%23333" height="14" width="14" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>')
		no-repeat right 8px center;
	background-size: 14px;
	padding-right: 28px; /* 화살표 공간 */
}

/* IE/Edge 구버전 대응 */
.combobox-list::-ms-expand {
	display: none;
}

/* 버튼도 input처럼 박스 UI 적용 */
.dialog-input-btn {
	box-sizing: border-box;
	width: 100%;
	padding: 8px 12px;
	border-radius: 10px;
	border: 1px solid #B7B7B9;
	background-color: #F9F9F9;
	font-size: 14px;
	color: #171F30;
	outline: none;
	box-sizing: border-box;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 선택된 상태 표현 (선택 옵션) */
.dialog-input-btn.active {
	background-color: #466CB4;
	color: white;
	border-color: #466CB4;
}

/* ==================================================================================== */
/* 정렬 */
.sort-icons {
	margin-left: 4px;
	font-size: 11px;
}

.sort-icon {
	cursor: pointer;
	color: #B7B7B9; /* 기본 회색 */
	text-decoration: none;
}

.sort-icon.active {
	color: #0056ff; /* 파란색: 현재 정렬 중 표시 */
	font-weight: 700;
}

/* ==================================================================================== */
/* 페이징 */
.page-size-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	justify-content: flex-start;
	width: auto;
	flex: 0 0 auto;
}

.pagination-row {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 20px;
	overflow-x: auto;
}

/* 페이징 전체 컨테이너 */
.pagination-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	min-width: max-content;
	font-size: 0;
	white-space: nowrap;
}

/* 개별 숫자(기본 a/strong)는 다시 폰트 크기 복원 */
.pagination-inner a, .pagination-inner strong {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	font-size: 14px;
	position: relative;
	font-weight: 400;
	color: #171F30;
	padding: 0 2px; /* 숫자 간 간격 극소화 */
	margin: 0;
	text-decoration: none;
}

/* 선택된 페이지는 Primary Color + 굵게 */
.pagination-inner strong, .pagination-inner .page-link.active {
	font-weight: 700;
	color: var(--primary-color);
}

/* 앞뒤 대괄호 */
.pagination-inner a:before, .pagination-inner strong:before {
	content: "[";
	margin-right: 1px;
}

.pagination-inner a:after, .pagination-inner strong:after {
	content: "]";
	margin-left: 1px;
}

/* hover 효과 */
.pagination-inner a:hover {
	color: #466CB4;
}

/* 표시 개수 */
.page-size-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: #FFFFFF;
	border: 1px solid #B7B7B9;
	padding: 6px 32px 6px 10px; /* 오른쪽 화살표 자리 확보 */
	border-radius: 6px;
	font-size: 14px;
	color: #171F30;
	/* ▼ SVG 아이콘 삽입 */
	background-image:
		url("data:image/svg+xml;utf8,<svg fill='none' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px;
}

.select:focus {
	outline: none;
	border-color: #0056ff;
	box-shadow: 0 0 0 1px #0056ff;
}

/* ==================================================================================== */
/* 버튼 */
.btn-row {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 24px;
}

.user-password-change {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 4px;
}

/* ==================================================================================== */
/* 지도 */
/* 지도 화면 최소 높이 설정 */
#map {
	width: 100%;
	height: 100%;
}

/* 지도 영역 패널 */
.map-panel {
	background: #FFFFFF;
	height: 60vh;
}

/* 지도 영역 패널 */
.map-border {
	background: #FFFFFF;
	padding: 8px;
	border-radius: 8px;
	border: 4px solid #6AA669;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ==================================================================================== */
/* 표시줄 */
/* 표시줄 그룹 */
.form-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* 표시줄 행 */
.form-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	flex-wrap: nowrap;
}

.form-row>div {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px; /* 라벨과 컨트롤 사이 간격 */
}

.form-row-route {
	display: flex; /* 혹시 안 되어 있으면 */
	align-items: center; /* 줄 높이가 변해도 label은 항상 가운데 정렬 */
}

.flight-route-move-row {
	flex-wrap: wrap;
}

.flight-route-move-group {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	flex: 1 1 0;
	min-width: 0;
}

.flight-route-move-group .dialog-input {
	flex: 1 1 auto;
	min-width: 260px;
}

#flightRouteSetIdView {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media ( min-width : 1281px) {
	.flight-route-move-row {
		flex-wrap: nowrap;
	}
	.flight-route-move-group {
		display: contents;
	}
	.flight-route-move-group .dialog-input {
		flex: 1 1 160px;
		min-width: 160px;
	}
}

@media ( max-width : 1280px) {
	.flight-route-move-row {
		align-items: stretch;
		flex-direction: column;
	}
	.flight-route-move-group {
		width: 100%;
	}
}

@media ( max-width : 768px) {
	.flight-route-move-group {
		align-items: stretch;
		flex-direction: column;
	}
	.flight-route-move-group .form-label-blue, .flight-route-move-group .dialog-input,
		.flight-route-move-group button {
		width: 100%;
	}
}

/* 라벨/컨트롤 묶음을 한 줄로 */
.inline-row {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	flex-shrink: 0;
}

/* input 숨김 */
.input-hidden {
	display: none;
}

/* 라벨 박스 - blue */
.form-label-blue {
	background: #466CB4;
	color: #FFFFFF;
	padding: 8px 16px;
	font-weight: bold;
	min-width: 130px;
	text-align: center;
	border-radius: 4px;
}

.form-label-white {
	background: #FFFFFF;
	color: #FFFFFF;
	padding: 8px 16px;
	font-weight: bold;
	min-width: 130px;
	text-align: center;
	border-radius: 4px;
}

/* 표시 텍스트 */
.form-text {
	font-size: 13px;
	color: #797C8E;
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* checkbox 포함된 td 전체를 click */
.check-td {
	position: relative;
	padding: 0;
}

.check-label {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.message-form {
	width: 80%;
}

.input-full {
	width: 100%;
}

.input-wide {
	width: 90%;
}

.input-medium {
	width: 300px;
}

.input-half {
	width: 40%;
}

.input-recipient {
	width: 187px;
}

.btn-search {
	width: 100px;
	border-color: var(--secondary-color) !important;
	background-color: var(--secondary-color) !important;
	color: #ffffff !important;
}

.btn-search:hover {
	border-color: var(--primary-color) !important;
	background-color: var(--primary-color) !important;
	color: #ffffff !important;
}

.disabled {
	background-color: #B7B7B9 !important;
	border-color: #B7B7B9 !important;
	color: #ffffff !important;
	cursor: not-allowed !important;
}

.file-field-wrap {
	width: 90%;
}

.file-list {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.file-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 8px;
	margin-top: 4px;
	border: 1px solid #B7B7B9;
	background: #F9F9F9;
}

.file-list-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.btn-file-remove {
	width: 60px;
	padding: 4px 8px;
}

.user-search-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, .35);
}

.user-search-panel {
	width: 460px;
	margin: 160px auto;
	background: #FFFFFF;
	border: 1px solid #B7B7B9;
}

.user-search-header {
	padding: 12px 16px;
	background: #466CB4;
	color: #FFFFFF;
	font-weight: 700;
}

.user-search-close {
	float: right;
	border: 0;
	background: transparent;
	color: #FFFFFF;
	font-size: 18px;
}

.user-search-body {
	padding: 16px;
}

.user-search-row {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}

.user-search-count {
	margin-bottom: 8px;
	font-size: 13px;
}

.user-search-table {
	font-size: 14px;
}

.user-search-message {
	padding: 12px;
	text-align: center;
}

.user-search-action {
	text-align: center;
}

/* ==================================================================================== */

/* JADS Extracted Inline Styles */
.jads-inline-001 {
	padding-top: 150px;
}

.jads-inline-002 {
	font-family: Tahoma;
	font-weight: bold;
	color: #171F30;
	line-height: 150%;
	width: 440px;
	height: 70px;
}

.jads-inline-003 {
	margin-top: 15px;
}

.jads-inline-004 {
	margin-top: 15px;
	padding-top: 15px;
	border-top: 2px solid #B7B7B9;
}

.jads-inline-005 {
	min-width: 170px;
}

.jads-inline-006 {
	min-width: 260px;
}

.jads-inline-007 {
	min-width: 110px;
}

.jads-inline-008 {
	min-width: 230px;
}

.jads-inline-009 {
	margin-left: auto;
}

.jads-inline-010 {
	margin-top: 12px;
}

.jads-inline-012 {
	display: flex;
	gap: 8px;
	align-items: center;
}

.jads-inline-013 {
	min-width: 80px;
}

.jads-inline-014 {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 14px;
}

.jads-inline-015 {
	width: 40px;
	padding: 8px 10px;
	background: #F9F9F9;
	border-bottom: 1px solid #F3F4F8;
}

.jads-inline-016 {
	padding: 8px 10px;
	background: #F9F9F9;
	border-bottom: 1px solid #F3F4F8;
	text-align: left;
}

.jads-inline-017 {
	padding: 20px 10px;
	text-align: center;
	color: #B7B7B9;
}

.jads-inline-018 {
	position: relative;
}

.jads-inline-019 {
	height: 100%;
}

.jads-inline-020 {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 9999;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid #F3F4F8;
	border-radius: 10px;
	padding: 10px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	font-size: 12px;
	min-width: 210px;
}

.jads-inline-021 {
	font-weight: 700;
	margin-bottom: 8px;
}

.jads-inline-022 {
	margin-bottom: 10px;
}

.jads-inline-023 {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.jads-inline-024 {
	display: flex;
	gap: 6px;
	margin-top: 6px;
}

.jads-inline-025 {
	padding: 4px 8px;
	border-radius: 8px;
	border: 1px solid #95A4B4;
	background: #171F30;
	color: #FFFFFF;
}

.jads-inline-026 {
	padding: 4px 8px;
	border-radius: 8px;
	border: 1px solid #95A4B4;
	background: #FFFFFF;
}

.jads-inline-027 {
	padding: 4px 8px;
	border-radius: 8px;
	border: 1px solid #95A4B4;
	background: #E70000;
	color: #FFFFFF;
}

.jads-inline-028 {
	width: 100%;
	border-collapse: collapse;
}

.jads-inline-029 {
	padding: 6px 10px;
	border: 1px solid #B7B7B9;
	font-weight: bold;
	background: #F9F9F9;
}

.jads-inline-030 {
	padding: 6px 10px;
	border: 1px solid #B7B7B9;
	text-align: right;
}

.jads-inline-031 {
	padding: 6px 10px;
	color: #797C8E;
}

.jads-inline-032 {
	margin-bottom: 8px;
	font-weight: bold;
	color: #0056ff;
	font-size: 20px;
}

.jads-inline-033 {
	padding: 6px 10px;
	margin-bottom: 8px;
	color: #C6A137;
	background: #FFE102;
	border: 1px solid #FFA500;
}

.jads-inline-034 {
	padding: 8px 10px;
	border: 1px solid #B7B7B9;
	color: #C6A137;
	background: #FFE102;
	text-align: center;
}

.jads-inline-035 {
	width: 35%;
	padding: 6px 10px;
	border: 1px solid #B7B7B9;
	font-weight: bold;
	background: #F9F9F9;
}

.jads-inline-036 {
	padding: 6px 10px;
	border: 1px solid #B7B7B9;
	text-align: left;
}

.jads-inline-037 {
	width: 20px;
}

.jads-inline-038 {
	width: 80px;
}

.jads-inline-039 {
	width: 200px;
}

.jads-inline-040 {
	display: none;
}

.jads-inline-041 {
	max-width: 600px;
}

.jads-inline-044 {
	height: 40px;
	min-width: 72px;
}

.jads-inline-045 {
	min-height: 96px;
	border: 1px solid #B7B7B9;
	border-radius: 6px;
	background: #FFFFFF;
	padding: 8px;
	box-sizing: border-box;
}

.jads-inline-047 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-right: 10px;
}

.jads-inline-048 {
	color: #797C8E;
}

.jads-inline-049 {
	width: 120px;
}

.jads-inline-050 {
	max-width: 500px;
}

.jads-inline-051 {
	max-height: 400px;
}

.jads-inline-052 {
	min-width: 80px;
}

.jads-inline-053 {
	object-position: 20% 50%;
}

.jads-inline-054 {
	object-position: 45% 50%;
}

.jads-inline-055 {
	object-position: 70% 50%;
}

.jads-inline-056 {
	display: flex;
	gap: 24px;
}

.jads-inline-057 {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
}

.jads-inline-058 {
	flex: 1;
}

.jads-inline-059 {
	min-width: 100px;
}

.jads-inline-060 {
	margin-top: 10px;
}

.jads-inline-061 {
	border: 4px solid #6AA669;
	border-radius: 8px;
	padding: 16px;
	width: 100%;
}

.jads-inline-062 {
	margin-top: 12px;
}

.jads-inline-063 {
	position: absolute;
	bottom: 20px;
	right: 20px;
	background: #FFFFFF;
	padding: 12px;
	border-radius: 8px;
	width: 200px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
	font-size: 14px;
}

.jads-inline-064 {
	padding-left: 12px;
}

.jads-inline-065 {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	margin-top: 10px;
}

.jads-inline-066 {
	background: #466CB4;
	color: white;
	min-width: 160px;
}

.jads-inline-067 {
	width: 150px;
}

.jads-inline-068 {
	display: none;
}

.jads-inline-069 {
	width: 170px;
}

.jads-inline-070 {
	min-width: 120px;
}

.jads-inline-080 {
	width: 80%;
}

/* JADS Color Table: utility color alignment */
.bg-blue-100, .hover\:bg-blue-50:hover {
	background-color: #f1f6fc !important;
}

.bg-blue-600, .bg-blue-700, .bg-\[\#466CB4\], .bg-\[\#0056ff\],
	.hover\:bg-blue-700:hover, .hover\:bg-\[\#26324D\]:hover {
	background-color: #0056ff !important;
}

.bg-gray-100, .bg-gray-200, .hover\:bg-gray-50:hover,
	.hover\:bg-gray-100:hover, .hover\:bg-yellow-100:hover, .bg-yellow-50 {
	background-color: #f3f4f8 !important;
}

.bg-gray-500, .bg-gray-600, .bg-gray-700, .hover\:bg-gray-600:hover,
	.hover\:bg-gray-700:hover, .hover\:bg-gray-800:hover {
	background-color: #797c8e !important;
}

.bg-red-500, .bg-red-600, .hover\:bg-red-600:hover, .hover\:bg-red-700:hover
	{
	background-color: #e21919 !important;
}

.bg-green-500, .border-green-500, .border-green-600 {
	background-color: #6aa669 !important;
	border-color: #6aa669 !important;
}

.bg-yellow-500 {
	background-color: #ffa500 !important;
}

.bg-teal-500 {
	background-color: #4ebfb2 !important;
}

.bg-white {
	background-color: #ffffff !important;
}

.border-gray-300, .border-gray-400, .focus\:border-blue-500:focus {
	border-color: #b7b7b9 !important;
}

.text-blue-600, .text-blue-500, .text-blue-400 {
	color: #0056ff !important;
}

.text-gray-500, .text-gray-600, .text-gray-700, .text-gray-800,
	.text-black {
	color: #171f30 !important;
}

.text-white {
	color: #ffffff !important;
}

.focus\:ring-blue-500:focus {
	--tw-ring-color: #0056ff !important;
}

/* ==================================================================================== */
/* 제주DA 웹 기준 공통 스타일 보정: font / button / table */
html, body, input, textarea, select, button {
	font-family: "Pretendard GOV", "Pretendard", -apple-system,
		BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue",
		"Apple SD Gothic Neo", "Apple Color Emoji", sans-serif;
	font-weight: 400;
	color: #333333;
	letter-spacing: 0;
}

body {
	background-color: var(--body-bg-color);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.sub-title, .dialog-modal-title, .modal-title {
	color: #222222;
	font-weight: 700;
}

.layout-header-inner h1 {
	color: inherit;
	font-weight: 700;
}

input[type="text"], input[type="password"], input[type="tel"], input[type="number"],
	input[type="email"], input[type="search"], input[type="date"], select,
	textarea, .dialog-input, .page-size-select, .filekind-select {
	border: 1px solid var(--input-color);
	border-radius: var(--input-radius-sm);
	background-color: #ffffff;
	color: #333333;
	font-family: var(--jads-font);
	font-size: 14px;
	transition: all .7s ease;
}

input[type="text"], input[type="password"], input[type="tel"], input[type="number"],
	input[type="email"], input[type="search"], input[type="date"], select,
	.dialog-input, .filekind-select {
	min-height: 45px;
	padding: 0 10px;
}

textarea {
	padding: 15px 10px;
	line-height: 1.6;
}

input:focus, textarea:focus, select:focus, .dialog-input:focus,
	.page-size-select:focus, .filekind-select:focus {
	outline: none;
	border-color: var(--primary-color) !important;
	box-shadow: 0 0 0 2px rgba(0, 86, 255, .12);
}

.dialog-input:disabled, .dialog-input[disabled], textarea.dialog-input:disabled
	{
	background-color: #f2f2f2;
	color: #888888;
	-webkit-text-fill-color: #888888;
	opacity: 1;
	cursor: not-allowed;
}

.search-form-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #f9f9f9;
	border-radius: var(--radius-sm);
	padding: 8px 12px;
	margin-bottom: 2px;
}

.search-form-wrap .search-form {
	display: flex;
	justify-content: flex-end;
	flex: 1 1 auto;
	min-width: 0;
}

.search-form .flex {
	display: flex;
	align-items: center;
	gap: 5px;
}

.search-form .common-search-compact {
	width: 30%;
	margin-left: auto;
}

.search-form input.wp100 {
	width: 100%;
}

.search-form .btn {
	min-width: 65px;
	margin: 0;
}

@media ( max-width : 900px) {
	.search-form-wrap {
		align-items: stretch;
		flex-direction: column;
	}
	.search-form-wrap .search-form {
		width: 100%;
	}
	.search-form .common-search-compact {
		width: 100%;
	}
}

.btn-row, .dialog-modal-actions, .modal-button-row {
	gap: 10px;
}

button.btn, a.btn, input.btn, button[class*="btn-"], a[class*="btn-"],
	input[class*="btn-"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 3.2rem !important;
	padding: .2rem 1.4rem !important;
	border-radius: var(--input-radius-sm) !important;
	font-family: var(--jads-font) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 43px !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	cursor: pointer;
	transition: all .7s ease !important;
	line-height: 1.2;
	gap: .4rem;
}

button.btn, a.btn, input.btn, button.btn-blue, a.btn-blue, input.btn-blue,
	button.btn-primary, a.btn-primary, input.btn-primary, button.btn-add, a.btn-add,
	input.btn-add, button.btn-confirm, a.btn-confirm, input.btn-confirm,
	button[class*="bg-blue"], a[class*="bg-blue"] {
	border-color: var(--primary-color) !important;
	background-color: var(--primary-color) !important;
	color: #ffffff !important;
}

button.btn:hover, a.btn:hover, input.btn:hover, button.btn-blue:hover, a.btn-blue:hover,
	input.btn-blue:hover, button.btn-primary:hover, a.btn-primary:hover,
	input.btn-primary:hover, button.btn-add:hover, a.btn-add:hover, input.btn-add:hover,
	button.btn-confirm:hover, a.btn-confirm:hover, input.btn-confirm:hover,
	button[class*="bg-blue"]:hover, a[class*="bg-blue"]:hover {
	border-color: var(--primary-hover) !important;
	background-color: var(--primary-hover) !important;
	color: #ffffff !important;
	text-decoration: none !important;
}

button.btn.line, a.btn.line, input.btn.line {
	border-color: var(--primary-color) !important;
	background-color: #ffffff !important;
	color: var(--primary-color) !important;
}

button.btn-edit, a.btn-edit, input.btn-edit {
	border-color: #26324D !important;
	background-color: #26324D !important;
	color: #ffffff !important;
}

button.btn.line:hover, a.btn.line:hover, input.btn.line:hover {
	border-color: var(--primary-color) !important;
	background-color: var(--primary-color) !important;
	color: #ffffff !important;
}

button.btn-edit:hover, a.btn-edit:hover, input.btn-edit:hover {
	border-color: var(--primary-color) !important;
	background-color: var(--primary-color) !important;
	color: #ffffff !important;
}

button.btn.second, a.btn.second, input.btn.second {
	border-color: var(--secondary-color) !important;
	background-color: var(--secondary-color) !important;
	color: #ffffff !important;
}

button.btn.second:hover, a.btn.second:hover, input.btn.second:hover {
	border-color: var(--primary-color) !important;
	background-color: var(--primary-color) !important;
	color: #ffffff !important;
}

button.btn-gray, a.btn-gray, input.btn-gray, button.btn-tertiary, a.btn-tertiary,
	input.btn-tertiary, button.btn-normal, a.btn-normal, input.btn-normal,
	button.btn-cancel, a.btn-cancel, input.btn-cancel, button[class*="bg-gray"],
	a[class*="bg-gray"] {
	border-color: #dddddd !important;
	background-color: #dddddd !important;
	color: #777777 !important;
}

button.btn-tertiary, a.btn-tertiary, input.btn-tertiary {
	border-color: #6f809a !important;
	background-color: var(--tertiary-color) !important;
	color: #ffffff !important;
}

button.btn-gray:hover, a.btn-gray:hover, input.btn-gray:hover, button.btn-tertiary:hover,
	a.btn-tertiary:hover, input.btn-tertiary:hover, button.btn-normal:hover,
	a.btn-normal:hover, input.btn-normal:hover, button[class*="bg-gray"]:hover,
	a[class*="bg-gray"]:hover {
	border-color: #d0d0d0 !important;
	background-color: #d0d0d0 !important;
	color: #555555 !important;
}

button.btn-tertiary:hover, a.btn-tertiary:hover, input.btn-tertiary:hover
	{
	border-color: var(--primary-color) !important;
	background-color: var(--primary-color) !important;
	color: #ffffff !important;
}

button.btn-cancel:hover, a.btn-cancel:hover, input.btn-cancel:hover {
	border-color: #26324d !important;
	background-color: #26324d !important;
	color: #ffffff !important;
}

button.btn-red, a.btn-red, input.btn-red, button.btn-delete, a.btn-delete,
	input.btn-delete, button[class*="bg-red"], a[class*="bg-red"] {
	border-color: var(--text-red) !important;
	background-color: var(--text-red) !important;
	color: #ffffff !important;
}

button.btn-red:hover, a.btn-red:hover, input.btn-red:hover, button.btn-delete:hover,
	a.btn-delete:hover, input.btn-delete:hover, button[class*="bg-red"]:hover,
	a[class*="bg-red"]:hover {
	border-color: #da0e11 !important;
	background-color: #da0e11 !important;
	color: #ffffff !important;
}

button.btn-green, a.btn-green, input.btn-green, button[class*="bg-green"],
	a[class*="bg-green"] {
	border-color: #4f9d3a !important;
	background-color: #4f9d3a !important;
	color: #ffffff !important;
}

button.btn-green:hover, a.btn-green:hover, input.btn-green:hover, button[class*="bg-green"]:hover,
	a[class*="bg-green"]:hover {
	border-color: #009b53 !important;
	background-color: #009b53 !important;
	color: #ffffff !important;
}

.btn-file-remove {
	min-height: 32px !important;
	line-height: 30px !important;
	padding: 0 10px !important;
	border-radius: 8px !important;
	font-size: 13px !important;
}

.ico.search {
	display: inline-block;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-right: 4px;
	background-image:
		url("data:image/svg+xml,%3Csvg fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cpath d='M20 20l-4.5-4.5'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
}

#dataTable, .table, .data-table, table.common-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--table-line-color);
	background: #ffffff;
	table-layout: fixed;
}

#dataTable thead tr, #dataTable th, .table th, .data-table th, table.common-table th
	{
	height: 42px;
	padding: 10px 12px;
	background: var(--table-color);
	border: 1px solid var(--table-line-color);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	word-break: keep-all;
}

#dataTable td, .table td, .data-table td, table.common-table td {
	min-height: 40px;
	padding: 10px 12px;
	border: 1px solid var(--table-line-color);
	background: #ffffff;
	color: var(--body-color);
	font-size: 14px;
	line-height: 1.45;
	text-align: center;
	word-break: keep-all;
	overflow-wrap: break-word;
}

#dataTableBody tr:nth-child(even) td, .table tr:nth-child(even) td,
	.data-table tr:nth-child(even) td, table.common-table tr:nth-child(even) td
	{
	background: #ffffff;
}

#dataTableBody tr:hover, #dataTableBody tr:hover td, .table tbody tr:hover td,
	.data-table tbody tr:hover td, table.common-table tbody tr:hover td {
	background: #f1f6fc;
	transition: background-color .7s ease;
}

#dataTableBody tr.selected, #dataTableBody tr.selected td,
	#dataTableBody tr.selected:hover, #dataTableBody tr.selected:hover td {
	background: #f1f6fc !important;
}

.project-link, #dataTable td a, .table td a, .data-table td a, table.common-table td a
	{
	color: #333333;
	text-decoration: none;
	transition: color .7s ease;
}

.project-link:hover, #dataTable td a:hover, .table td a:hover,
	.data-table td a:hover, table.common-table td a:hover {
	color: var(--primary-color);
	text-decoration: underline;
}

.page-size-select {
	min-height: 45px;
	border-radius: 8px;
	font-size: 13px;
}

.pagination-row {
	margin-top: 20px;
}

.pagination-inner a, .pagination-inner strong {
	color: #171f30;
	font-size: 14px;
	transition: color .7s ease;
}

.pagination-inner strong, .pagination-inner .page-link.active {
	color: var(--primary-color);
	font-weight: 700;
}

.pagination-inner a:hover {
	color: var(--primary-hover);
}

.table-guide {
	margin-bottom: 8px;
	font-size: 15px;
	color: #666;
}

.table-guide strong {
	color: var(--primary-color);
	font-weight: 600;
}

.readonly-value {
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid #B7B7B9;
	border-radius: 4px;
	background-color: #F9F9F9;
	color: var(--text-strong);
	box-sizing: border-box;
	line-height: 1.5;
	display: flex;
	align-items: center;
	word-break: break-all;
}

.readonly-value.multiline {
	white-space: pre-line;
	line-height: 1.5;
}

/* Attachment list: used by site survey and message pages. */
.form-row>.attachment-list, .form-row>.attach-file-list, .form-row>.attached-list
	{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	width: 90%;
	padding: 8px;
	border: 1px solid #dadde5;
	border-radius: 4px;
	background-color: #ffffff;
	box-sizing: border-box;
}

.form-row>.attachment-list.attachment-list-readonly {
	width: 80%;
}

.attachment-item, .attachment-list .attach-file-item, .attach-file-list .attach-file-item,
	.attached-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin-bottom: 4px;
	padding: 4px 6px;
	background-color: #ffffff;
	border-bottom: 1px solid #eef0f4;
	box-sizing: border-box;
	line-height: 1.5;
}

.attachment-item:last-child, .attachment-list .attach-file-item:last-child,
	.attach-file-list .attach-file-item:last-child, .attached-item:last-child
	{
	margin-bottom: 0;
	border-bottom: 0;
}

.attachment-info, .attachment-list .attach-file-item>span,
	.attach-file-list .attach-file-item>span, .attached-info {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1;
	min-width: 0;
	font-size: 13px;
	line-height: 1.3;
	word-break: break-all;
}

.attachment-name, .attached-name, .attached-link {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	text-decoration: none;
}

.attachment-size, .attached-size {
	flex: 0 0 auto;
	color: #797C8E;
	white-space: nowrap;
}

.attachment-remove, .attach-file-remove {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	min-width: 18px;
	min-height: 18px;
	margin-left: auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #e21919;
	color: #ffffff;
	font-size: 12px;
	font-weight: bold;
	line-height: 18px;
	text-align: center;
	cursor: pointer;
}

.attachment-link:hover, .attached-link:hover {
	color: var(--primary-color);
	text-decoration: underline;
}

.attachment-empty, .attachment-list>[id^="empty"] {
	font-size: 13px;
	color: #797C8E;
	line-height: 1.5;
}

/* Toast */
#toast {
	position: fixed;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	padding: 10px 20px;
	border-radius: 4px;
	z-index: 99999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}

#toast.show {
	opacity: 1;
}

.btn-project-image {
	height: 36px;
	padding: 0 16px;
	border: 1px solid var(--primary-color);
	border-radius: 4px;
	background-color: #ffffff;
	color: #000000;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-project-image:hover {
	border-color: var(--primary-color);
	background-color: var(--primary-color);
	color: #ffffff;
}

.project-image-area {
	margin-top: 16px;
	padding: 12px;
	border: 1px solid #d9dee8;
	background-color: #ffffff;
	box-sizing: border-box;
}

.project-image-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.project-image-link {
	display: block;
	width: 100%;
	border: 1px solid #e1e5ee;
	background-color: #ffffff;
	box-sizing: border-box;
}

.project-image {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.project-image-empty {
	padding: 20px;
	text-align: center;
	color: #666666;
}

.project-image-item {
	min-width: 0;
	width: 100%;
	border: 1px solid #e1e5ee;
	background-color: #ffffff;
	box-sizing: border-box;
	overflow: hidden;
}

.project-image-link {
	display: block;
	width: 100%;
}

.project-image {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.project-image-caption {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	padding: 8px 10px;
	border-top: 1px solid #e1e5ee;
	font-size: 13px;
	color: #333333;
	background-color: #ffffff;
	box-sizing: border-box;
}

.project-image-no {
	flex: 0 0 auto;
	min-width: 22px;
	height: 22px;
	line-height: 22px;
	border-radius: 50%;
	background-color: var(--primary-color);
	color: #ffffff;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
}

.project-image-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media ( max-width : 900px) {
	.project-image-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media ( max-width : 600px) {
	.project-image-grid {
		grid-template-columns: 1fr;
	}
}

.dashboard-map-view .is-hidden {
	display: none !important;
}

.dashboard-map-view .dashboard-map-sheet-file-name {
	cursor: pointer;
	background-color: #ffffff;
}

/* ==================================================================================== */
/* 도엽 통계 */
.map-layout {
	display: flex;
	gap: 12px;
	height: 60vh;
}

.map-area {
	flex: 1;
	min-width: 0;
}

.map-stat-panel {
	width: 320px;
	background: #FFFFFF;
	border: 1px solid #B7B7B9;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.map-stat-header {
	padding: 8px 12px;
	background: #466CB4;
	color: white;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}

.map-stat-content {
	flex: 1;
	padding: 8px;
	overflow-y: auto;
}

.map-stat-content-title {
	padding: 6px 10px;
	border: 1px solid #B7B7B9;
	font-weight: bold;
	background: #F9F9F9;
	text-align: center;
}

.map-stat-sheet-title {
	margin-bottom: 8px;
	padding: 8px 10px;
	background: #F9F9F9;
	border: 1px solid #B7B7B9;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 400;
	color: #171F30;
}

.map-stat-sheet-label {
	color: #466CB4;
	margin-right: 6px;
}

/* ==================================================================================== */
/* 필수 항목 - 적색 별표 */
.required-mark {
	margin-left: 4px;
	color: #e53935;
}
/* 날짜 기간 */
.date-range {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
}