: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);
	margin-left: calc(var(--admin-sidebar-w) + var(--spacing-7)*2);
	margin-right: var(--spacing-7);
	padding: var(--spacing-6);
	border-radius: var(--radius-2);
	background: var(--white);
	box-shadow: var(--shadow-option-list);
}

/* =========================================================================
   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 */
}

/* =========================================================================
   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);
}
.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 {
	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: not-allowed;
	pointer-events: none;
}

.gnb-sub-nav-item.user-name:hover {
	background-color: transparent;
}


/* =========================================================================
   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: 768px) {
	.page-header {
		display: none;
	}
}