:root {
	--admin-header-h: 76px;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
	margin-bottom: unset;
}

body.admin {
	background: var(--blue-050);
}

.pc-container {
	top: calc(var(--admin-header-h) + var(--spacing-7)*2);
	/* min-height: calc(100vh - var(--admin-header-h) - var(--spacing-7) * 3); */
	/* min-height: calc(100dvh - var(--admin-header-h) - var(--spacing-7) * 3); */
	min-height: calc(100vh - var(--admin-header-h) - var(--spacing-7) * 3);
	min-height: calc(100dvh - var(--admin-header-h) - var(--spacing-7) * 3);
	max-height: calc(100vh - var(--admin-header-h) - var(--spacing-7) * 3);
	max-height: calc(100dvh - var(--admin-header-h) - var(--spacing-7) * 3);
	margin-right: var(--spacing-7);
	margin-left: calc(var(--admin-sidebar-w) + var(--spacing-7)*2);
	padding: var(--spacing-6);
	border-radius: var(--radius-2);
	background: var(--white);
	box-shadow: var(--shadow-option-list);
	overflow-y: scroll;
}

.pc-container > main {
	padding: 0px;
	/* overflow-y: scroll; */
}
/* 대시보드 */
.pc-sidebar.pc-sidebar-hide ~ .pc-container {
	margin-left: var(--spacing-7);
}
.pc-sidebar.pc-sidebar-hide ~ .pc-header {
	left: var(--spacing-7);
}
.pc-container:has(.section-admin-main) {
	padding: 0px;
	background: transparent;
	box-shadow: unset;
}
/* =========================================================================
   Bootstrap 버튼 시스템 스타일
   ========================================================================= */
.btn + :not(.btn--tertiary, .btn--text) {
	color: var(--white);
}
.btn:hover, .btn:active, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
	color: var(--white);
	text-decoration: none;
	border-color: var(--blue-900);
	background-color: var(--blue-900);
}
.btn--secondary:hover, .btn--secondary:active, :not(.btn-check) + .btn--secondary:active, .btn--secondary:first-child:active, .btn--secondary.active, .btn--secondary.show {
	border-color: var(--black);
	background: var(--black);
}
.btn--tertiary:hover, .btn--tertiary:active, :not(.btn-check) + .btn--tertiary:active, .btn--tertiary:first-child:active, .btn--tertiary.active, .btn--tertiary.show {
	background: var(--white);
	border-color: var(--secondary);
	color: var(--secondary);
}
.btn--text:hover, .btn--text:active, :not(.btn-check) + .btn--text:active, .btn--text:first-child:active, .btn--text.active, .btn--text.show {
	border-color: transparent;
	background: transparent;
	color: var(--secondary);
}
/* =========================================================================
   Bootstrap 탭 시스템 스타일
   ========================================================================= */

/* Bootstrap 탭 기본 스타일 및 동작 */
.nav {
	--bs-nav-link-padding-x: var( --spacing-4);
	--bs-nav-link-padding-y: calc(var(--spacing)*7);
	--bs-nav-link-font-size: var(--text-heading-xs);  /*  18px */
	--bs-nav-link-font-weight: 500;
	--bs-nav-link-line-height: 1.3333;  /* 24px */
	--bs-nav-link-color: var(--text-secondary);
	--bs-nav-link-hover-color: var(--secondary);
	--bs-nav-link-disabled-color: var(--text-disabled);
}
[data-pc-preset=preset-1] .nav {
	--bs-nav-link-hover-color: var(--secondary);
}

.nav-tabs {
	--bs-nav-tabs-border-radius: unset;
	--bs-nav-tabs-border-width: 1px;
	--bs-nav-tabs-border-color: var(--color-stroke);
	--bs-nav-tabs-link-border-width: 2px;
	--bs-nav-tabs-link-border-color: transparent;
	--bs-nav-tabs-link-hover-border-color: var(--secondary);
	--bs-nav-tabs-link-active-border-width: 2px;
	--bs-nav-tabs-link-active-border-color: var(--black);
	--bs-nav-tabs-link-active-bg: var(--white);
	--bs-nav-tabs-link-active-color: var(--black);
}

.nav-tabs .nav-link {
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
	border: unset;
	border-bottom: var(--bs-nav-tabs-link-border-width) solid var(--bs-nav-tabs-link-border-color);
	line-height: var(--bs-nav-link-line-height);
	text-align: center;
}

.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
	border: unset;
	border-bottom: var(--bs-nav-tabs-link-active-border-width) solid var(--bs-nav-tabs-link-hover-border-color);
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
	border: unset;
	border-bottom: var(--bs-nav-tabs-link-active-border-width) solid var(--bs-nav-tabs-link-active-border-color);
}

.nav.large {
	--bs-nav-link-padding-x: var( --spacing-10);
	--bs-nav-link-padding-y: calc(var(--spacing)*11);
}
.nav.small {
	--bs-nav-link-font-size: var(--text-body-md);  /*  14px */
	--bs-nav-link-line-height: 1.4285;  /* 20px */
}

/* full-width-tabs 옵션 스타일 */
.tabs-container.full-width-tabs > .nav-tabs {
	display: flex;
	justify-content: center;
	width: 100%;
}

.tabs-container.full-width-tabs > .nav-tabs .nav-item {
	flex: 1;
	text-align: center;
}

.tabs-container.full-width-tabs > .nav-tabs .nav-link {
	width: 100%;
	text-align: center;
	justify-content: center;
	display: flex;
	align-items: center;
}

/* 탭 아이콘 스타일 */
.nav-link .tab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

.nav-link .tab-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* 탭 아이콘 색상 - 일반 상태 */
.nav-link .tab-icon svg path {
	stroke: var(--text-secondary);
}

/* 탭 아이콘 색상 - hover 상태 */
.nav-link:hover .tab-icon svg path,
.nav-link:focus .tab-icon svg path {
	stroke: var(--secondary);
}

/* 탭 아이콘 색상 - active 상태 */
.nav-link.active .tab-icon svg path,
.nav-item.show .nav-link .tab-icon svg path {
	stroke: var(--black);
}

.tabs-container.full-width-tabs .tab-content {
	margin-top: var(--spacing-9);
}

/* =========================================================================
   Bootstrap 페이지네이션션 시스템 스타일
   ========================================================================= */
.pagination {
	--pagination-min-width: 32px;
    --bs-pagination-gap: var(--spacing-3);
    --bs-pagination-padding-x: 7px;
    --bs-pagination-padding-y: 6px;
    --bs-pagination-font-size: var(--text-body-md);
    --bs-pagination-line-height: 1.4285;  /* 20px */
    --bs-pagination-color: var(--text-primary);
    --bs-pagination-bg: var(--white);
    --bs-pagination-border-radius: 4px;
    --bs-pagination-hover-color: var(--text-primary);
    --bs-pagination-hover-bg: var(--gray-100);
    --bs-pagination-focus-color: var(--text-primary);
    --bs-pagination-focus-bg: var(--gray-100);
    --bs-pagination-active-color: var(--white);
    --bs-pagination-active-bg: var(--secondary);
    --bs-pagination-disabled-color: var(--gray-300);
    --bs-pagination-disabled-bg: var(--white);
	gap: var(--bs-pagination-gap);
}
.pagination-lg {
	--pagination-min-width: 45px;
    --bs-pagination-padding-x: 12px;
    --bs-pagination-padding-y: 11px;
    --bs-pagination-font-size: var(--text-body-lg);
    --bs-pagination-border-radius: 10px;
}
[data-pc-preset=preset-1] .pagination {
    --bs-pagination-hover-color: var(--text-primary);
    --bs-pagination-focus-color: var(--text-primary);
    --bs-pagination-focus-box-shadow: unset;
    --bs-pagination-active-bg: var(--secondary);
}
.page-link {
	min-width: var(--pagination-min-width);
	min-height: var(--pagination-min-width);
    border: unset;
    line-height: var(--bs-pagination-line-height);
	text-align: center;
}
.pagination .page-item .page-link,
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    border-radius: var(--bs-pagination-border-radius);
}
.pagination .page-item .page-link.page-link-icon {
	display: flex;
	justify-content: center;
	align-items: center;
}
.pagination .page-item .page-link.page-link-icon svg {
	width: 18px;
	height: 18px;
}
.pagination .page-item .page-link.page-link-icon path {
	stroke: var(--gray-600);
	stroke-width: 1.5;
}
.pagination .page-item.disabled .page-link {
	color: var(--bs-pagination-disabled-color);
}
.pagination .page-item.disabled .page-link.page-link-icon path {
	stroke: var(--bs-pagination-disabled-color);
}


/* =========================================================================
   Bootstrap 검색 시스템 스타일
   ========================================================================= */
.form-search i {
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	display: flex;
}
.pc-header .form-search i {
	top: 50%;
}
.form-search i svg, .pc-header .form-search i svg {
	width: 24px;
	height: 24px;
}
.pc-header .form-search .form-control {
	width: 300px;
	padding: calc(var(--spacing)*5) calc(var(--spacing)*5) calc(var(--spacing)*5) 44px;
	border-radius: var(--radius-2);
	border: 1px solid var(--color-stroke);
	background: var(--color-bg-card);
	font-size: var(--text-body-lg);
	line-height: 1.5;
}
.pc-header .form-search .form-control::placeholder {
	color: var(--gray-400);
}
.pc-header .form-search .form-control:focus, .pc-header .form-search .form-control:active {
	border: 1px solid var(--primary);
}
.pc-header .form-search .form-control::-webkit-search-cancel-button {
	-webkit-appearance: none;
	height: 14px;
	width: 14px;
	margin-inline-start: var(--spacing-3);
	background: url("/assets/icons/ic_x.svg") no-repeat center;
	background-size: contain;
	filter: brightness(0) saturate(100%) invert(61%) sepia(0%) saturate(0%) hue-rotate(179deg) brightness(93%) contrast(86%);
	cursor: pointer;
}

/* =========================================================================
   Bootstrap 모달 시스템 스타일
   ========================================================================= */
.modal {
	--bs-modal-width: 620px;
	--bs-modal-header-border-color: var(--color-stroke);

	display:none;
	justify-content:center;
	align-items:center;
	background:rgba(0,0,0,0.3);
}

.modal-header {
	justify-content: center;
	padding: var(--spacing-6);
}
.modal-header h3 {
	margin-bottom: 0;
}
.modal-header .modal-close-btn {
	position: absolute;
	top: var(--spacing-2);
	right: 0;
}
.modal-body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-7);
	/* padding: var(--spacing-7) calc(var(--spacing-6)*1.5); */
	margin: var(--spacing-7) 0;
	padding: 0 calc(var(--spacing-6)*1.5);
}
.modal-footer {
	justify-content: center;
	padding: 0 calc(var(--spacing-6)*1.5) var(--spacing-7);
	border: unset;
}
.modal-footer > * {
	margin: 0
}
.modal-footer .btn--large:only-child {
	min-width: 334px;
}

/* modal form */
.modal .form-item .label {
	font-size: var(--text-heading-sm);  /* 20px */
	font-weight: 600;
	line-height: 1.2;  /* 24px */
}

.gnb-sub-nav-item.user-name {
	padding: var(--spacing-4) var(--spacing-5);
	color: var(--gray-900);
	cursor: default;
	pointer-events: none;
}

/* header-icon.user 내부의 gnb-sub-nav와 user-name에 대한 더 구체적인 선택자 */
.header-icon.user .gnb-sub-nav,
.header-icon.user .gnb-sub-nav .gnb-sub-nav-item.user-name {
	cursor: default;
}
.gnb-sub-nav-item.user-name:hover {
	background-color: transparent;
}

/* user-name만 있는 경우 최소/최대 너비 설정 */
.gnb-sub-nav:has(.user-name:only-child) {
	width: fit-content;
	max-width: 200px;
}

.gnb-sub-nav:has(.user-name:only-child) .user-name {
	white-space: normal;
	word-break: keep-all;
	overflow-wrap: break-word;
}
.gnb-sub-nav:has(.user-name:only-child) .user-name .user-name-text {
	display: inline;
}



/* =========================================================================
   Bootstrap 뱃지 시스템 스타일
   ========================================================================= */
.badge {
}
[data-pc-preset=preset-1] .text-bg-primary {
	background-color: var(--primary) !important;
}

/* =========================================================================
   Bootstrap 카드 시스템 스타일
   ========================================================================= */
.card {
	margin-bottom: unset;
}
[data-pc-direction=ltr] .bg-light {
	border: unset;
	background: var(--gray-100) !important;
}

.card-body {
	--bs-card-spacer-x: calc(var(--spacing-6)*1.5);
	--bs-card-spacer-y: calc(var(--spacing-6)*1.5);
}


/* =========================================================================
   Bootstrap 브레드크럼 스타일
   ========================================================================= */
body:has(.force-mobile-header) .page-header {
	display: none;
}

.page-header {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	max-width: var(--max-w);
	margin: 0 auto;
	padding-top: var(--header-h);
}

.page-header .page-block {
	position: relative;
	padding-top: var(--spacing-5);
}

.breadcrumb {
	--bs-breadcrumb-item-padding-x: var(--spacing-2);
	padding: 0;
	margin: 0;
	background: transparent;
}

.breadcrumb-item {
	display: inline-flex;
	align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
	content: "";
	width: 18px;
	height: 18px;
	padding: 0;
	background-image: url('/assets/icons/ic_chevron_right.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	vertical-align: middle;
	filter: brightness(0) saturate(100%) invert(70%) sepia(1%) saturate(1%) hue-rotate(147deg) brightness(88%) contrast(88%);
}
.page-header .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
	top: 0;
}

.page-header .breadcrumb-item a, .page-header .breadcrumb-item.active {
	--letter-spacing-ratio: -0.004%;
	font-size: var(--text-body-sm);  /* 12px */
	font-weight: 500;
	line-height: 1.5;  /* 16px */
	color: var(--gray-400);
	text-decoration: none;
	transition: color 0.15s ease-in-out;
}

.breadcrumb-item a:hover {
	color: var(--secondary);
}

.page-header .breadcrumb-item.active {
	color: var(--gray-400);
}

.page-header .breadcrumb .breadcrumb-item:last-child {
	opacity: 1;
}

/*
	Breakpoints
*/
@media (max-width: 1440px) {
	.page-header {
		padding: var(--header-h) var(--spacing-5) 0;
	}
}
@media (max-width: 1024px) {
	.pc-header {
        top: var(--spacing-7);
        left: var(--spacing-7);
        transition: all 0.15s ease-in-out;
    }
	.pc-container {
        margin-left: var(--spacing-7);
    }
    .pc-sidebar {
		top: 0;
		bottom: 0;
        left: -280px;
        border-radius: 0 var(--radius-2) var(--radius-2) 0;
    }
	.pc-sidebar .navbar-wrapper {
		height: 100%;
	}
	.pc-sidebar .navbar-content {
		height: calc(100vh - 84px - (64px + 41px));
		height: calc(100dvh - 84px - (64px + 41px));
	}
}
/* 모바일 반응형 */
@media (max-width: 768px) {
	.page-header {
		display: none;
	}

	/* 
	    start: tab
	*/
	.nav {
		--bs-nav-link-font-size: var(--text-body-md);
		--bs-nav-link-line-height: 1.4285;
	}
	.nav.large {
		--bs-nav-link-padding-x: var(--spacing-4);
		--bs-nav-link-padding-y: var(--spacing-5);
	}
	.nav-item {
		width: 100%;
	}
	.nav-tabs .nav-link {
		justify-content: center;
		width: 100%;
	}

	/* 모바일 전용 스타일 */
	.nav-tabs.mobile-only-style,
	.tabs-container.full-width-tabs > .nav-tabs.mobile-only-style {
		--bs-nav-link-padding-x: 14.5px;
        --bs-nav-link-padding-y: 8.5px;
		--bs-nav-link-font-size: var(--text-body-md);
		--bs-nav-link-font-weight: 700;
		--bs-nav-link-line-height: var(--text-heading-sm);
		--bs-nav-link-color: var(--text-primary);
		--bs-nav-tabs-border-radius: 999px;
		--bs-nav-tabs-border-width: 0;
		--bs-nav-tabs-border-color: transparent;
		--bs-nav-tabs-link-border-width: 1.5px;
		--bs-nav-tabs-link-border-color: var(--color-stroke);
		--bs-nav-tabs-link-hover-border-color: var(--color-stroke);
		--bs-nav-tabs-link-hover-bg: var(--blue-050);
		--bs-nav-tabs-link-active-border-width: 1.5px;
		--bs-nav-tabs-link-active-border-color: var(--secondary);
		--bs-nav-tabs-link-active-color: var(--secondary);
		justify-content: center;
		gap: var(--spacing-3);
		width: fit-content;
	}

	.nav-tabs.mobile-only-style .nav-item,
	.tabs-container.full-width-tabs > .nav-tabs.mobile-only-style .nav-item {
		flex: unset;
		width: fit-content;
	}

	.nav-tabs.mobile-only-style .nav-link,
	.tabs-container.full-width-tabs > .nav-tabs.mobile-only-style .nav-link {
		display: flex;
		justify-content: center;
		align-items: center;
		width: fit-content;
		border-radius: var(--bs-nav-tabs-border-radius);
		border: var(--bs-nav-tabs-link-border-width) solid var(--bs-nav-tabs-link-border-color);
		text-align: center;
	}
	.nav-tabs.mobile-only-style .nav-link:hover,
	.tabs-container.full-width-tabs > .nav-tabs.mobile-only-style .nav-link:hover {
		border-color: var(--bs-nav-tabs-link-hover-border-color);
		background-color: var(--bs-nav-tabs-link-hover-bg);
	}
	.nav-tabs.mobile-only-style .nav-link.active,
	.nav-tabs.mobile-only-style .nav-item.show .nav-link,
	.tabs-container.full-width-tabs > .nav-tabs.mobile-only-style .nav-link.active,
	.tabs-container.full-width-tabs > .nav-tabs.mobile-only-style .nav-item.show .nav-link {
		border-color: var(--bs-nav-tabs-link-active-border-color);
	}

	.tabs-container.full-width-tabs .tab-content {
		margin-top: var(--spacing-7);
	}

	/* 
	    end: tab
	*/

	.pagination {
		--bs-pagination-gap:6px;
	}
}

@media (max-width: 640px) {
	.pc-sidebar-popup-title {
		display: none;
	}
}