@font-face {
	font-family: 'main-font';
	src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

:root {
	/* ================== Font ================== */
	--bodyFontFamily: "main-font", sans-serif;
	/* ================== Font Sizes ================== */
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-md: 1.125rem;
	--font-size-lg: 1.25rem;
	--font-size-xl: 1.5rem;
	--font-size-13: 0.8125rem; /* 13px */
	--font-size-15: 0.9375rem; /* 15px */
	--font-size-17: 1.0625rem; /* 17px */
	--font-size-19: 1.1875rem; /* 19px */
	--font-size-21: 1.3125rem; /* 21px */
	--font-size-22: 1.375rem; /* 22px */
	/* ================== Font Weights ================== */
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-mbold: 600;
	--font-weight-bold: 700;
	/* ================== Color: Primary Theme ================== */
	--color-primary: #4f85e7;
	--color-primary-light: #e8f0ff;
	--color-primary-dark: #3c6fd3;
	/* ================== Color: Accent / Border / Shadow ================== */
	--color-accent: #f5f7fa;
	--color-border: #dce3ec;
	--color-shadow: rgba(0, 0, 0, 0.04);
	/* ================== Color: Text ================== */
	--color-text-main: #2e2e2e;
	--color-text-sub: #666;
	--color-text-muted: #aaa;
	--color-text-dark: #1f2937;
	--color-text-gray: #6b7280;
	/* ================== Color: Feedback ================== */
	--color-success: #4fb477;
	--color-success-dark: #0f4624;
	--color-error: #ea7070;
	--color-danger: #ef4444;
	--color-warning: #f7c948;
	--color-info: #4fa9c6;
	--color-muted: #6b7280;
	/* ================== Color: Basic ================== */
	--color-white: #ffffff;
	--color-black: #000000;
	/* ================== Color: Backgrounds ================== */
	--color-bg: #ffffff;
	--color-bg-light: #f9fbfd;
	--color-bg-white: #ffffff;
	--color-bg-danger: #fef2f2;
	/* ================== Radius ================== */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 10px;
	--radius-xl: 16px;
	--radius-full: 9999px;
	--radius-button: 0.5rem;
	/* ================== Shadow ================== */
	--shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
	/* ================== Utility ================== */
	--transition: all 0.3s ease;
	--sidebar-width: 16rem;
	/* ================== Grayscale ================== */
	--gray-50: #f9fafb;
	--gray-100: #f3f4f6;
	--gray-200: #e5e7eb;
	--gray-300: #d1d5db;
	--gray-400: #9ca3af;
	--gray-500: #6b7280;
	--gray-600: #4b5563;
	--gray-700: #374151;
	--gray-900: #111827;
	/* ================== Greens ================== */
	--green-100: #dcfce7;
	--green-800: #166534;
	/* ================== Badge Colors ================== */
	--badge-blue-bg: #e0f2fe;
	--badge-blue-text: #0369a1;
	--badge-green-bg: #d1fae5;
	--badge-green-text: #047857;
	--badge-yellow-bg: #fef9c3;
	--badge-yellow-text: #92400e;
	--badge-red-bg: #fee2e2;
	--badge-red-text: #991b1b;
	--badge-purple-bg: #ede9fe;
	--badge-purple-text: #6d28d9;
	--badge-gray-bg: #f3f4f6;
	--badge-gray-text: #374151;
	/* ================== Footer ================== */
	--color-footer-bg: #1a1a1a;
	--color-footer-text: #ffffff;
	--color-footer-muted: #aaa;
	--color-footer-border: #2d2d2d;
	--footer-padding: 3rem 1rem;
	--footer-radius: var(--radius-md);
	/* ================== Custom Aliases ================== */
	--primary: #1e40af;
	--primary-light: #3b82f6;
	
	--status-success-bg: #dcfce7; /* 초록 배경: green-100 */
	--status-success-text: #166534; /* 진한 초록: green-800 */
	--status-success-border: #bbf7d0; /* 테두리: green-200 */

	--status-info-bg: #eff6ff; /* 연한 파랑: blue-50 */
	--status-info-text: #1d4ed8; /* 진한 파랑: blue-700 */
	--status-info-border: #bfdbfe; /* 테두리: blue-200 */

	--status-warning-bg: #fff7ed; /* 연한 오렌지: orange-50 */
	--status-warning-text: #c2410c; /* 진한 오렌지: orange-700 */
	--status-warning-border: #fed7aa; /* 테두리: orange-200 */

	--status-error-bg: #fef2f2; /* 연한 빨강: red-50 */
	--status-error-text: #b91c1c; /* 진한 빨강: red-700 */
	--status-error-border: #fecaca; /* 테두리: red-200 */
}

/* ========== 태블릿 대응 (1024px 이하) ========== */
@media (max-width: 1024px) {
	:root {
		--font-size-base: 0.95rem;
		--font-size-md: 1.05rem;
		--font-size-lg: 1.15rem;
		--font-size-xl: 1.35rem;
		--font-size-13: 0.7875rem; /* 12.6px */
		--font-size-15: 0.875rem; /* 14px */
		--font-size-17: 0.95rem; /* 15.2px */
		--font-size-19: 1.05rem; /* 16.8px */
		--font-size-21: 1.15rem; /* 18.4px */
		--font-size-22: 1.25rem; /* 20px */
		--radius-button: 0.45rem;
		--footer-padding: 2.5rem 1rem;
	}
}


/* ========== 모바일 대응 (576px 이하) ========== */
@media (max-width: 576px) {
	:root {
		--font-size-base: 0.875rem;
		--font-size-md: 1rem;
		--font-size-lg: 1.125rem;
		--font-size-xl: 1.25rem;
		--font-size-13: 0.75rem; /* 12px */
		--font-size-15: 0.875rem; /* 14px */
		--font-size-17: 1rem; /* 16px */
		--font-size-19: 1.125rem; /* 18px */
		--font-size-21: 1.25rem; /* 20px */
		--font-size-22: 1.3125rem; /* 21px */
		--radius-sm: 3px;
		--radius-md: 5px;
		--radius-button: 0.4rem;
		--footer-padding: 2rem 0.75rem;
	}
}

html, body {
	font-family: var(--bodyFontFamily) !important;
	height: 100%;
	margin: 0;
	padding: 0;
}
:where([class^="ri-"])::before {
	content: "\f3c2";
}
#wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	position: relative;
	padding-bottom: 50px; /* 푸터 높이만큼 여유 */
	box-sizing: border-box;
}

.fixbtn {
	position: fixed;
	bottom: 60px; /* 푸터 위로 올라오게 */
	left: 0;
	width: 100%;
	background-color: #fff;
	box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
	padding: 0.75rem 1rem;
	z-index: 901;
	text-align: center;
}


/* ==================================== */
/* ========== 1. 버튼 스타일 ========== */
/* ==================================== */


.btn-mode-blue {
	@apply bg-blue-100 text-primary text-sm rounded-full px-4 py-2 flex items-center font-medium hover:bg-blue-200;
}

.btn-mode-orange {
	@apply bg-orange-100 text-secondary text-sm rounded-full px-4 py-2 flex items-center font-medium hover:bg-orange-200;
}

/* ==================================== */
/* ========== 비활성화 버튼 ========== */
/* ==================================== */

/* [1] HTML 속성으로 비활성화된 버튼 */
.btn:disabled,
.btn.disabled,
.btn.disabled:focus,
.btn.disabled:hover,
.btnnew:disabled,
.btnnew.disabled {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
	box-shadow: none;
	transform: none;
}

/* [2] 명시적 비활성화 클래스 */
.btn-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
	box-shadow: none;
	transform: none;
}

/* [3] 텍스트 버튼류도 동일 처리 */
.btn-outline:disabled,
.btn-outline.btn-disabled {
	background-color: transparent;
	color: #aaa;
	border-color: #ddd;
}

/* [4] 색상 버튼별 기본 disabled 색 유지 */
.btn-main:disabled,
.btn1:disabled {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.btn-sub:disabled,
.btn0:disabled {
	background-color: var(--color-accent);
	color: #777;
	border-color: var(--color-accent);
}


/* ==================================== */
/* ========== 버튼 인터랙션 ========== */
/* ==================================== */

/* 기본 버튼 인터랙션 */
.btn:hover,
.btn:focus,
.btn:focus-visible,
.btn:active,
.btnnew:hover,
.btnnew:focus,
.btnnew:focus-visible,
.btnnew:active {
	opacity: 0.9;
	text-decoration: none;
	outline: none;
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	transition: all 0.2s ease-in-out;
}

/* primary 버튼 */
.btn-main:hover,
.btn-main:focus,
.btn1:hover,
.btn1:focus,
.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
}

/* 서브 버튼 */
.btn-sub:hover,
.btn-sub:focus,
.btn0:hover,
.btn0:focus {
	background-color: #e0e6ec;
	border-color: #ccd3da;
}

/* success */
.btn-success:hover,
.btn-success:focus {
	background-color: #3da66a;
	border-color: #3da66a;
}

/* warning */
.btn-warning:hover,
.btn-warning:focus {
	background-color: #f4c036;
	border-color: #f4c036;
	color: #222;
}

/* error */
.btn-error:hover,
.btn-error:focus {
	background-color: #d85e5e;
	border-color: #d85e5e;
}

/* info */
.btn-info:hover,
.btn-info:focus {
	background-color: #3b94b0;
	border-color: #3b94b0;
}

/* outline 버튼 */
.btn-outline:hover,
.btn-outline:focus {
	background-color: var(--color-primary-light) !important;
	color: var(--color-primary-dark) !important;
	border-color: var(--color-primary-dark) !important;
}


/* ==================================== */
/* ========== 2. 입력 요소 =========== */
/* ==================================== */
.input-field,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
	width: 100%;
	padding: 12px 14px;
	font-size: var(--font-size-15);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	height: 50px;
	line-height: 1.4;
}

textarea {
	height: auto;
	min-height: 120px;
}

	input[readonly],
	input:disabled,
	textarea:disabled {
		background-color: var(--color-bg-light);
		color: var(--color-text-sub);
		cursor: not-allowed;
	}

.input-search {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 10px 36px 10px 12px;
	background: #fff url('/img/icon-search.svg') no-repeat right 10px center;
	background-size: 16px;
}

.input-error {
	border-color: var(--color-error);
	background-color: color-mix(in srgb, var(--color-error) 10%, #fff);
}

	.input-error:focus {
		outline: 2px solid var(--color-error);
	}


@media (max-width: 576px) {
	input:not([type="radio"]):not([type="checkbox"]),
	select {
		font-size: var(--font-size-sm);
		padding: 10px 12px;
		height: 48px;
	}

	.form-check input[type="radio"] + label,
	.form-check input[type="checkbox"] + label {
		margin-top: 4px;
	}

	textarea {
		font-size: var(--font-size-sm);
		min-height: 100px;
	}
}

/* ==================================== */
/* ========== 3. 폼 그룹 ============= */
/* ==================================== */
.form-group {
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
}

.form-label {
	font-weight: 600;
	margin-bottom: 8px;
	font-size: var(--font-size-15);
}

@media (max-width: 576px) {
	.form-group {
		margin-bottom: 16px;
	}

	.form-label {
		font-size: var(--font-size-sm);
		margin-bottom: 4px;
	}
}

/* ==================================== */
/* === 4. 체크박스 및 라디오 버튼 ==== */
/* ==================================== */
.form-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--font-size-15);
	margin-bottom: 10px;
	min-height: 44px;
}

	.form-check input[type="checkbox"],
	.form-check input[type="radio"] {
		width: 20px;
		height: 20px;
	}

@media (max-width: 576px) {
	.form-check {
		font-size: var(--font-size-sm);
		min-height: 48px;
	}
}

/* ==================================== */
/* ===== 5. 입력 박스 및 행 그룹 ===== */
/* ==================================== */
.form-box {
	background-color: var(--color-bg);
	padding: 20px;
	border-radius: 8px;
	border: 1px solid var(--color-bg-light);
	margin-bottom: 30px;
}

.input-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

	.input-row > * {
		flex: 1 1 100%;
	}

@media (min-width: 768px) {
	.input-row > * {
		flex: 1 1 48%;
	}
}

/* ==================================== */
/* ========== 5-1. 폼 요소 확장 ========= */
/* ==================================== */

/* 라벨 + 입력 수평 배치 */
.form-inline {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

	.form-inline .form-label {
		margin-bottom: 0;
		width: 100px;
		flex-shrink: 0;
		text-align: right;
	}

	.form-inline .input-field {
		flex: 1;
	}

/* 설명 텍스트 또는 오류 메시지 */
.form-helper {
	font-size: var(--font-size-13);
	color: var(--color-text-muted);
	margin-top: 4px;
}

.input-error + .form-helper {
	color: var(--color-error);
}

/* 유효성 상태 */
.input-error {
	border-color: var(--color-error);
	background-color: color-mix(in srgb, var(--color-error) 10%, #fff);
}

.input-success {
	border-color: var(--color-success);
	background-color: color-mix(in srgb, var(--color-success) 10%, #fff);
}

/* 폼 내부 구분선 */
.form-separator {
	height: 1px;
	background-color: var(--color-border);
	margin: 20px 0;
}

/* 인풋 + 앞/뒤 요소 조합 */
.input-addon-group {
	display: flex;
	align-items: center;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: #fff;
	overflow: hidden;
}

.input-addon {
	padding: 10px;
	background-color: var(--color-accent);
	color: var(--color-text-sub);
	white-space: nowrap;
	font-size: var(--font-size-sm);
}

.input-addon-group input {
	flex: 1;
	border: none;
	padding: 10px 12px;
	outline: none;
	font-size: var(--font-size-15);
}

/* ==================================== */
/* ============= 6. 모달 ============= */
/* ==================================== */
.modal-wrap {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 90%;
	max-width: 480px;
	transform: translate(-50%, -50%);
	background-color: #fff;
	border-radius: var(--radius-md);
	z-index: 9999;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	overflow-y: auto;
	max-height: 90vh;
}

.modal-header {
	padding: 16px;
	font-size: var(--font-size-md);
	font-weight: bold;
	border-bottom: 1px solid var(--color-border);
}

.modal-body {
	padding: 20px;
	font-size: var(--font-size-15);
	line-height: 1.5;
}

.modal-footer {
	padding: 15px;
	text-align: right;
	border-top: 1px solid #eee;
}

@media (max-width: 576px) {
	.modal-wrap {
		width: 94%;
		max-height: 95vh;
	}

	.modal-body {
		padding: 16px;
	}
}

/* ==================================== */
/* ============== 카드 ============== */
/* ==================================== */
.card {
	border: 1px solid var(--color-bg-light);
	border-radius: var(--radius-lg);
	padding: 20px;
	background-color: #fff;
	box-shadow: 0 1px 4px var(--color-shadow);
	margin-bottom: 24px;
}

.card-body {
	font-size: var(--font-size-15);
	color: var(--color-text-main);
	line-height: 1.6;
}

.card-title {
	font-size: var(--font-size-17);
	font-weight: 600;
	margin-bottom: 10px;
}


@media (max-width: 576px) {
	.card {
		padding: 16px;
	}

	.card-title {
		font-size: var(--font-size-base);
	}
}

/* ==================================== */
/* ============= 테이블 ============== */
/* ==================================== */
.table-box {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-size-15);
}

	.table-box th,
	.table-box td {
		padding: 12px 10px;
		border: 1px solid var(--color-bg-light);
		text-align: center;
	}

	.table-box thead th {
		background-color: var(--color-bg);
		font-weight: bold;
	}

.table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* 모바일에서 테이블을 블록형으로 전환 */
@media (max-width: 576px) {
	.table-box {
		display: block;
		width: 100%;
		overflow-x: auto;
	}

		.table-box thead {
			display: none;
		}

		.table-box tr {
			display: block;
			margin-bottom: 12px;
			border-bottom: 1px solid var(--color-border);
		}

		.table-box td {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px;
			text-align: left;
			font-size: var(--font-size-sm);
			position: relative;
		}

			.table-box td::before {
				content: attr(data-label);
				font-weight: bold;
				color: var(--color-text-sub);
				width: 40%;
				display: inline-block;
			}
}

/* ==================================== */
/* ============ 타이틀 ============== */
/* ==================================== */
.page-title {
	font-size: var(--font-size-xl);
	font-weight: bold;
	margin-bottom: 20px;
	color: #222;
	text-align: center;
}

.section-title {
	font-size: var(--font-size-md);
	font-weight: 600;
	margin-bottom: 16px;
	color: var(--color-text-sub);
	border-left: 4px solid var(--color-primary);
	padding-left: 10px;
}

@media (max-width: 576px) {
	.page-title {
		font-size: var(--font-size-lg);
		margin: 12px 0 16px;
	}

	.section-title {
		font-size: var(--font-size-base);
		margin-bottom: 12px;
	}
}

/* ==================================== */
/* ========== 메시지 박스 ============ */
/* ==================================== */
.message-box {
	padding: 15px;
	border-radius: 6px;
	font-size: var(--font-size-sm);
	margin-bottom: 20px;
	line-height: 1.5;
}

.alert-success {
	background-color: color-mix(in srgb, var(--color-success) 15%, #ffffff);
	color: var(--color-success);
	border: 1px solid var(--color-success);
}

.alert-error {
	background-color: color-mix(in srgb, var(--color-error) 15%, #ffffff);
	color: var(--color-error);
	border: 1px solid var(--color-error);
}

.alert-warning {
	background-color: color-mix(in srgb, var(--color-warning) 25%, #ffffff);
	color: var(--color-text-main);
	border: 1px solid var(--color-warning);
}

.alert-info {
	background-color: color-mix(in srgb, var(--color-info) 15%, #ffffff);
	color: var(--color-info);
	border: 1px solid var(--color-info);
}


@media (max-width: 576px) {
	.message-box {
		font-size: var(--font-size-13);
		padding: 12px;
	}
}

/* ==================================== */
/* ============= 탭 메뉴 ============= */
/* ==================================== */
.tab-menu {
	overflow-x: auto;
	white-space: nowrap;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

	.tab-menu::-webkit-scrollbar {
		display: none;
	}


.tab-item {
	flex: 1;
	text-align: center;
	padding: 12px 0;
	font-size: var(--font-size-15);
	font-weight: 500;
	cursor: pointer;
	color: #555;
	border-bottom: 3px solid transparent;
}

	.tab-item.tab-active {
		color: var(--color-primary);
		border-bottom-color: var(--color-primary);
		font-weight: 700;
	}
	
@media (max-width: 576px) {
	.tab-item {
		font-size: var(--font-size-sm);
		padding: 10px 0;
	}
}

/* ==================================== */
/* =============== 배지 ============== */
/* ==================================== */
.badge {
	display: inline-block;
	padding: 4px 10px;
	font-size: var(--font-size-xs);
	font-weight: 600;
	border-radius: 4px;
	color: #fff;
}

.badge-pill {
	border-radius: 50px;
}

.badge-success {
	background-color: var(--color-success);
}

.badge-danger {
	background-color: var(--color-error);
}

.badge-warning {
	background-color: var(--color-warning);
	color: var(--color-text-main);
}

.badge-info {
	background-color: var(--color-info);
}

@media (max-width: 576px) {
	.badge {
		font-size: var(--font-size-xs);
		padding: 4px 8px;
	}
}

/* ==================================== */
/* ========== 스피너 애니메이션 ====== */
/* ==================================== */
.spinner {
	width: 32px;
	height: 32px;
	border: 4px solid var(--color-bg-light);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	margin: auto;
}

.spinner-sm {
	width: 18px;
	height: 18px;
	border-width: 2px;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* ==================================== */
/* ============ 유틸리티 ============= */
/* ==================================== */

.w-33 {
	width: 33% !important;
}

.w-15 {
	width: 15% !important;
}
.wh-3r {
	width: 3rem;
	height: 3rem;
}
/* ============================ */
/*        Font Size (픽셀)       */
/* ============================ */
.fs-12 {
	font-size: 12px !important;
}

.fs-13 {
	font-size: 13px !important;
}

.fs-14 {
	font-size: 14px !important;
}

.fs-15 {
	font-size: 15px !important;
}
.fs-16 {
	font-size: 16px !important;
}
.fs-17 {
	font-size: 17px !important;
}
.fs-18 {
	font-size: 18px !important;
}

.fs-20 {
	font-size: 20px !important;
}
.fs-22 {
	font-size: 22px !important;
}

.fs-23 {
	font-size: 23px !important;
}

.fs-24 {
	font-size: 24px !important;
}

.fs-28 {
	font-size: 28px !important;
}

.fs-32 {
	font-size: 32px !important;
}

/* ============================ */
/*       Font Weight (세분화)   */
/* ============================ */
.fw-300 {
	font-weight: 300 !important;
}

.fw-400 {
	font-weight: 400 !important;
}

/* ============================ */
/*      Layout 유틸리티         */
/* ============================ */
.flex-center {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
}

.v-center {
	display: flex !important;
	align-items: center !important;
}

/* ============================ */
/*        Custom Color          */
/* ============================ */
.bg-main {
	background-color: var(--color-primary) !important;
}
.bg-error {
	background-color: var(--color-error) !important;
}

.bg-sub {
	background-color: var(--color-accent) !important;
}

.bg-light {
	background-color: var(--color-bg-light) !important;
}

.text-primary {
	color: var(--color-primary) !important;
}

.text-main {
	color: var(--color-text-main) !important;
}

.text-sub {
	color: var(--color-text-sub) !important;
}

.text-muted {
	color: var(--color-text-muted) !important;
}

.text-success {
	color: var(--color-success) !important;
}

.text-error {
	color: var(--color-error) !important;
}

.text-warning {
	color: var(--color-warning) !important;
}

.text-info {
	color: var(--color-info) !important;
}

/* ============================ */
/*     여백 (간단 커스텀)        */
/* ============================ */
.mb-1 {
	margin-bottom: 4px !important;
}

.mb-2 {
	margin-bottom: 8px !important;
}

.mb-3 {
	margin-bottom: 12px !important;
}

.mb-4 {
	margin-bottom: 16px !important;
}

.mt-1 {
	margin-top: 4px !important;
}

.mt-2 {
	margin-top: 8px !important;
}

.mt-3 {
	margin-top: 12px !important;
}

.p-1 {
	padding: 4px !important;
}

.p-2 {
	padding: 8px !important;
}

.p-3 {
	padding: 12px !important;
}

@media (max-width: 576px) {
	.mb-4 {
		margin-bottom: 12px !important;
	}

	.mt-3 {
		margin-top: 8px !important;
	}
}


.w-33px {
	width: 33px;
}

.rounded-lg {
	border-radius: 16px !important;
}
.rounded-l-button {
	border-radius: 12px 0px 0 12px !important;
}

.rounded-r-button {
	border-radius: 0 12px 12px 0px !important;
}

.rounded-button {
	border-radius: 12px !important;
}
/* ========================================== */
/* ========== 1. Overlay 배경 ============== */
/* ========================================== */
#bglayer,
#bglayer2 {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	background-color: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(2px);
}

#bglayer2 {
	z-index: 1010;
}

@keyframes modalShow {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes modalShowFast {
	from {
		opacity: 0;
		transform: translate(-50%, -40%);
	}

	to {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
}
/* ========================================== */
/* ========== 2. 알럿 메시지 박스 ========== */
/* ========================================== */
#layermessage,
#layermessage2 {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	color: var(--gray-800);
	padding: 24px;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	z-index: 1160;
	width: 90%;
	max-width: 460px;
	text-align: center;
	display: none;
	animation: modalShowFast 0.15s ease-out;
}

	#layermessage div,
	#layermessage2 div {
		text-align: center;
		font-size: var(--font-size-base);
		color: var(--color-text-main);
		line-height: 1.6;
		word-break: keep-all;
	}

/* ========================================== */
/* ========== 3. 프로그레스 바 ============= */
/* ========================================== */
#bgprogress {
	position: fixed;
	inset: 0;
	display: none;
	justify-content: center;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(2px);
	z-index: 2000;
}

	#bgprogress.show {
		display: flex !important;
	}

.loading-card {
	background-color: #fff;
	padding: 32px 24px;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
	text-align: center;
	animation: fadeUp 0.4s ease-out both;
	width: 90%;
	max-width: 400px;
}

.loading-title {
	font-size: var(--font-size-base);
	font-weight: 600;
	color: var(--color-text-main);
	margin-bottom: 0.5rem;
}

.loading-subtext {
	font-size: var(--font-size-sm);
	color: var(--color-text-sub);
	margin-bottom: 1rem;
}

.loading-card .progress {
	height: 14px;
	background-color: var(--gray-100);
	border-radius: 9999px;
	overflow: hidden;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.97);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* ========================================== */
/* ========== 4. 컨펌(확인) 박스 =========== */
/* ========================================== */
#confirmbox {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	padding: 24px;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	width: 90%;
	max-width: 460px;
	text-align: center;
	z-index: 1160;
	display: none;
	animation: modalShowFast 0.15s ease-out;
}

#confirmboxmsg {
	font-size: var(--font-size-base);
	color: var(--color-text-main);
	margin-bottom: 20px;
	line-height: 1.6;
	word-break: keep-all;
}

.confirmbtnbox {
	display: flex;
	justify-content: center;
	gap: 12px;
}

	.confirmbtnbox .btn {
		display: inline-block;
		padding: 0.75rem 1rem;
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
		border-radius: var(--radius-button);
		text-decoration: none;
		cursor: pointer;
	}

	.confirmbtnbox .btn-main {
		background-color: var(--color-primary);
		border-color: var(--color-primary);
		color: #fff;
	}

		.confirmbtnbox .btn-main:hover,
		.confirmbtnbox .btn-main:focus,
		.confirmbtnbox .btn-main:active {
			background-color: var(--color-primary-dark);
			border-color: var(--color-primary-dark);
			color: #fff;
		}

	.confirmbtnbox .btn-sub {
		background-color: var(--color-bg-white);
		color: var(--color-text-sub);
		border: 1px solid var(--color-border);
	}

		.confirmbtnbox .btn-sub:hover,
		.confirmbtnbox .btn-sub:focus,
		.confirmbtnbox .btn-sub:active {
			background-color: var(--gray-100);
			color: var(--color-text-main);
			border-color: var(--color-border);
		}

/* ========================================== */
/* ============ 5. 기본 모달창 ============= */
/* ========================================== */
.mpgPop {
	display: none;
}

.mpgPopFull {
	position: fixed;
	inset: 0;
	display: none;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 1045;
	overflow-y: auto;
	padding: 40px 16px;
	backdrop-filter: blur(2px);
}

.mpgPopWrap {
	width: 94%;
	max-width: 480px;
	margin: auto;
	background-color: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	position: relative;
	overflow: hidden;
	animation: modalShow 0.3s ease-out;
}

.mpgPopTitle {
	background-color: var(--color-primary);
	color: #fff;
	padding: 16px 20px;
	font-size: var(--font-size-base);
	font-weight: bold;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

	.mpgPopTitle a {
		color: #fff;
		font-size: var(--font-size-lg);
		font-weight: normal;
		text-decoration: none;
	}

.mpgPopScroll {
	padding: 20px;
	font-size: var(--font-size-sm);
	color: var(--color-text-main);
	max-height: 70vh;
	overflow-y: auto;
}

.popGuide {
	margin-bottom: 16px;
	line-height: 1.6;
	color: var(--color-text-sub);
}

.odrPopBtn {
	margin-top: 16px;
	text-align: center;
}

	.odrPopBtn li a {
		display: inline-block;
		background-color: var(--color-primary);
		color: #fff;
		border-radius: var(--radius-sm);
		padding: 10px 24px;
		font-size: var(--font-size-15);
		font-weight: bold;
	}


/* 체크박스 동의 영역 */
#pop2 label {
	display: block;
	font-size: var(--font-size-sm);
	margin-bottom: 4px;
	color: var(--color-text-main);
}

/* 테이블 반응형 */
#pop2 table.board_view {
	width: 100%;
	font-size: var(--font-size-sm);
	margin-top: 16px;
}

	#pop2 table.board_view th {
		text-align: left;
		background-color: var(--color-bg-light);
		padding: 8px 10px;
	}

	#pop2 table.board_view td {
		padding: 8px 10px;
		text-align: left;
		border-top: 1px solid var(--color-border);
	}



@media (max-width: 576px) {

	.header a[class^="link"] {
		display: inline-block;
		width: 32px;
		height: 32px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 24px 24px;
	}

	.header .gnb a[class^="link"] {
		display: inline-block;
		width: 36px;
		height: 36px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 24px 24px;
	}


		.header .gnb a[class^="link"]::after {
			content: attr(title);
			position: absolute;
			top: 100%;
			left: 50%;
			transform: translateX(-50%);
			font-size: 11px;
			/*color: #444;*/
			white-space: nowrap;
		}

	.header .link1 {
		background-image: url(../image/header_ico_1.png) /* list-check */
	}

	.header .link2 {
		background-image: url(../image/header_ico_2.png) /* person */
	}

	.header .link3 {
		background-image: url(../image/header_ico_3.png) /* logout */
	}

	.header .link4 {
		background-image: url(../image/header_ico_4.png) /* chat dot*/
	}

	.header .gnb .link5 {
		background-image: url(../image/header_ico_5.png) /* wallet */
	}

	.header .link6 {
		background-image: url(../image/header_ico_6.png)
	}

	.header .link7 {
		background-image: url(../image/header_ico_7.png)
	}

	.header .link8 {
		background-image: url(../image/header_ico_8.png)
	}

	.header .link9 {
		background-image: url(../image/header_ico_9.png)
	}

	.header .link10 {
		background-image: url(../image/header_ico_10.png)
	}
}

strong.title {
	background: url(../image/ico_2.png) left 1px no-repeat;
	background-size: auto 18px;
	padding-left: 23px;
	color: var(--color-text-sub);
}


/* ============================================ */
/* ============= 응시 화면 공통 ============== */
/* ============================================ */
.test_side {
	position: fixed;
	top: 0;
	right: 0;
	width: 90%;
	max-width: 220px;
	height: 100%;
	background-color: #fff;
	box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
	z-index: 1050;
	transform: translateX(100%);
	transition: transform 0.3s ease-in-out;
	overflow-y: auto;
}

	.test_side.open {
		transform: translateX(0%);
	}



/* ======================= */
/* 하단 모달 팝업 (공통)   */
/* ======================= */
.bottom-sheet-popup {
	position: fixed;
	left: 0;
	bottom: -100%;
	width: 100%;
	height: 50%;
	background-color: #fff;
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
	transition: bottom 0.3s ease-in-out;
	z-index: 1060;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

	.bottom-sheet-popup.open {
		bottom: 0;
	}

	.bottom-sheet-popup .popup-header {
		padding: 1rem;
		font-weight: 600;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ddd;
		background-color: #f1f3f5;
		font-size: var(--font-size-17); 
	}

	.bottom-sheet-popup .popup-title {
		font-size: var(--font-size-base);
	}

	.bottom-sheet-popup .popup-content {
		padding: 1rem;
		flex: 1;
		overflow-y: auto;
	}

	.bottom-sheet-popup .close-btn {
		background: none;
		border: none;
		font-size: 1.25rem;
		cursor: pointer;
		color: #666;
	}

@keyframes slideUp {
	from {
		transform: translateY(100%);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes slideInRight {
	from {
		transform: translateX(100%);
	}

	to {
		transform: translateX(0);
	}
}

.test_side.open {
	animation: slideInRight 0.3s ease-in-out forwards;
}

.bottom-sheet-popup.open {
	animation: slideUp 0.3s ease-in-out forwards;
}

/* ======================= */
/* 답안 표기란 내부 구성  */
/* ======================= */

.question_cont {
	display: flex;
	align-items: center;
	height: 38px;
	flex-wrap: wrap;
}

.question_box_num {
	width: 40px;
	height: 38px;
	text-align: center;
	line-height: 38px;
	font-size: var(--font-size-sm);
	font-weight: 700;
	background-color: #e7f0ff;
	padding: 0 8px;
	color: #004080;
}

.question_box {
	display: flex;
	width: calc(100% - 40px);
}

/* ---------- 답안 버튼 (s-answer-btn) 시트 영역 스타일 ---------- */
#body_exam_area .s-answer-options .s-answer-btn span {
	display: inline-block;
	width: 24px;
	height: 24px;
	font-size: var(--font-size-sm);
	line-height: 22px;
	text-align: center;
	border-radius: 50%;
	border: 2px solid #dee2e6;
	background-color: #f8f9fa;
	transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out, color 0.1s ease-in-out;
}

#body_exam_area .s-answer-options .s-answer-btn:hover span,
#body_exam_area .question_list_cont .q_two_way.check:hover span,
#body_exam_area .question_list_cont.answer_ck .q_two_way.answer_check:hover span {
	border-color: var(--color-primary) !important;
	background-color: #e7f1ff !important;
	color: var(--gray-600) !important;
}


	#body_exam_area .question_list_cont.answer_ck .q_two_way.answer_check {
		background-color: #eaf4ff;
		transition: background-color 0.1s ease-in-out;
	}

#body_exam_area .question_list_cont .q_two_way.check span {
	background-color: #9b9b9b;
	color: #fff;
	box-shadow: 0 0 0 1px #9b9b9b;
	transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
}

#body_exam_area .question_list_cont.answer_ck .q_two_way.answer_check span {
	background-color: var(--color-primary);
	color: #fff;
	box-shadow: 0 0 0 1px var(--color-primary);
	transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
}


/* 문제 번호 박스 */
.v_q_num {
	font-weight: 700;
	text-align: center;
	border-radius: 8px;
	box-shadow: inset 0 0 0 2px #fff;
}

/* 문제 유형 + 배점 정보 */
.v_q_infor {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: var(--font-size-15);
	font-weight: 500;
	color: #333;
}

	.v_q_infor > div:first-child {
		font-weight: 600;
		color: var(--color-primary, #0d6efd);
	}

	.v_q_infor > div:last-child {
		font-size: var(--font-size-13);
		color: #666;
	}



.view_container {
	width: 100% !important;
}

.view_question_box {
	display: flex;
	align-items: center;
	width: 100%;
}

	.view_question_box .v_q_title {
		width: 100%;
		font-weight: 600;
	}

	.view_question_box .v_q_num {
		width: 50px;
		line-height: 40px;
		box-sizing: border-box;
		font-weight: 700;
		font-size: var(--font-size-md);
		text-align: center;
		background-color: #ccc;
	}

	.view_question_box .v_q_type {
		width: 60px;
		line-height: 40px;
		text-align: center;
		border: solid 1px #ccc
	}

	.view_question_box .v_q_infor {
		display: flex;
		flex-direction: column;
	}

		.view_question_box .v_q_infor > div {
			font-size: var(--font-size-base);
		}

/* 하단 패딩 확보 */
.test_wrap {
	padding-bottom: 60px;
}

.tool_btn_wrap button,
.practice_text_wrap {
	font-size: var(--font-size-sm);
}



.q_v_box {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

	.q_v_box div {
		width: 36px;
		height: 36px;
		line-height: 36px;
		text-align: center;
		font-size: var(--font-size-sm);
		background-color: #f5f5f5;
		color: var(--color-text-main);
		border-radius: 6px;
		cursor: pointer;
		transition: background-color 0.2s ease;
	}

		.q_v_box div:hover {
			background-color: var(--color-primary-light);
		}


.v_q_list {
	margin: 10px 0;
}

	.v_q_list .v_q_num svg {
		width: 100%;
		float: left;
	}

		.v_q_list .v_q_l img {
			width: 100%;
			height: auto;
			float: left;
		}

	.v_q_list.check .v_q_num {
		border-radius: 50%;
		background-color: var(--nptc_basis)
	}

	/* 문제 번호 (svg 포함) */
	.v_q_list .v_q_num {
		width: 28px; /* svg 크기에 따라 조정 */
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 문제 번호 (아이콘) */
	.v_q_list .v_q_num {
		width: 32px;
		height: 32px;
		min-width: 32px;
		min-height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		color: #fff;
		font-weight: bold;
		font-size: var(--font-size-sm);
		line-height: 1;
	}


/* 문제 번호 + 문제 텍스트 */
.v_q_list .v_q_num {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	border-radius: 50%;
	font-size: var(--font-size-sm);
	font-weight: bold;
	flex-shrink: 0;
	border-color: var(--color-primary)
}

.v_q_list .v_q_l {
	flex: 1;
	font-size: var(--font-size-15);
	line-height: 1.6;
	word-break: break-word;
}

/* 상단 도구 버튼 간격 */
.tool_btn_wrap button {
	min-width: 25% !important;
}

.test_head h3 {
	font-size: 1.5rem;
	color: var(--color-primary);
}

.test_head .btn.close_button {
	font-size: 0.875rem;
	padding: 0.4rem 0.75rem;
}

.test_head .q_time,
.test_head .q_l_time {
	font-weight: 600;
}


.view_question_cont.card {
	border: 1px solid #e0e0e0;
	border-radius: 0.75rem;
}

.v_q_num {
	font-weight: 600;
	font-size: 0.9rem;
}


/* 공통 팝업 레이어 */
.div_pop_Ip {
	position: fixed;
	inset: 0;
	z-index: 1050;
	display: none;
	background-color: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(2px);
}

	.div_pop_Ip.open {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1rem;
	}

/* 팝업 콘텐츠 박스 */
.div_pop_Ip_box {
	background: #fff;
	width: 90%;
	max-width: 460px;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	overflow: hidden;
	animation: modalShow 0.3s ease-out;
}

	/* 팝업 헤더 */
	.div_pop_Ip_box .title {
		position: relative;
		padding: 0.6rem 1.25rem;
		font-size: var(--font-size-19);
		font-weight: 600;
		background-color: var(--gray-50);
		border-bottom: 1px solid var(--gray-200);
		color: var(--gray-900);
		display: flex;
		align-content: center;
		justify-content: space-between;
	}

	/* 닫기 버튼 */
	.div_pop_Ip_box .cont_close {
		background: none;
		border: none;
		font-size: var(--font-size-lg);
		color: var(--gray-600);
		cursor: pointer;
		width: 24px;
		height: 24px;
	}

		.div_pop_Ip_box .cont_close img,
		.img_close {
			width: 80%;
			height: auto;
			max-width: 20px;
		}

	/* 팝업 본문 영역 */
	.div_pop_Ip_box .cont_box {
		padding: 20px 24px;
		font-size: var(--font-size-15);
		color: var(--gray-700);
		text-align: center;
	}

/* 안 푼 문제 목록 */
.q_v_box {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

	.q_v_box > div {
		width: 36px;
		height: 36px;
		line-height: 36px;
		text-align: center;
		background-color: var(--color-accent);
		color: var(--color-text-main);
		border-radius: 6px;
		font-weight: 600;
		cursor: pointer;
		transition: background-color 0.2s ease;
	}

		.q_v_box > div:hover {
			background-color: var(--color-primary-light);
		}

.submit_type .s_title {
	font-size: var(--font-size-17);
	font-weight: 700;
	color: var(--color-text-main);
	line-height: 1.5;
}

	.submit_type .s_title span {
		color: var(--color-error);
		font-size: var(--font-size-md);
	}

.submit_type .s_cont {
	font-size: var(--font-size-15); 
	margin-top: 0.75rem;
	color: var(--color-text-sub);
}

/* 버튼 정렬 */
.lp_btn_wrap {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

	.lp_btn_wrap button {
		flex: 1;
	}

/* 팝업 등장 애니메이션 */
@keyframes popupFadeIn {
	from {
		opacity: 0;
		transform: scale(0.96);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}



.exam-list li {
	transition: box-shadow 0.2s ease-in-out;
}

	.exam-list li:hover {
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
	}

.fixbtn .btn {
	border-radius: 12px;
}

.btn-outline-warning {
	color: #d97706;
	border-color: #fcd34d;
}

	.btn-outline-warning:hover {
		background-color: #fcd34d;
		color: #000;
	}

.text-orange {
	color: #f97316
}

.nav-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 0.75rem;
}


.mt-29{
	margin-top:8rem; 
}

#test_container {
	position: relative;
}

	#test_container::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 500px;
		height: 500px;
		background-image: url('../img/watermark.png');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		transform: translate(-50%, -50%) rotate(-30deg);
		opacity: 0.3; /* 흐리게 처리 */
		pointer-events: none; /* 클릭 방지 */
		z-index: 0;
	}
	#test_container.h-auto::after {
		top: 70%;
	}

/* 공통 버튼 스타일 */
.gt_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	font-size: var(--font-size-sm);
	border: 1px solid var(--color-primary); /* 기본 파란 테두리 */
	color: var(--color-primary); /* 기본 파란 텍스트 */
	background-color: white;
	border-radius: 12px;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
	cursor: pointer;
}

	/* Hover 상태 */
	.gt_btn:hover {
		background-color: rgba(0, 71, 204, 0.06); /* 연한 파란 배경 */
	}

	/* Active 상태 */
	.gt_btn:active {
		background-color: rgba(0, 71, 204, 0.12);
		box-shadow: inset 0 0 0 1px var(--color-primary);
	}

	/* Disabled 상태 */
	.gt_btn.disabled,
	.gt_btn[disabled] {
		background-color: #f3f4f6; /* 회색 배경 */
		color: #9ca3af; /* 회색 텍스트 */
		border-color: #e5e7eb; /* 연한 테두리 */
		cursor: not-allowed;
		pointer-events: none;
	}

.tab-content {
	display: none;
}

	.tab-content.active {
		display: block;
	}