/*
 * BK renewal shared design system.
 * 형사 홈페이지의 전역 토큰과 공통 컴포넌트 규격을 민사 Rhymix 구조에 매핑한다.
 */
.bk-civil-renewal {
	--bk-font: "Roboto", "Pretendard", "Pretendard Variable", sans-serif;
	--bk-color-primary: #005352;
	--bk-color-primary-dark: #003f3e;
	--bk-color-gold: #e7c873;
	--bk-color-action: #d25700;
	--bk-color-ink: #172240;
	--bk-color-text: #212121;
	--bk-color-muted: #94969d;
	--bk-color-line: #d8d9dc;
	--bk-color-surface: #f5f7fa;
	--bk-subpage-pc-vw: 100vw;
	color: var(--bk-color-text);
	font-family: var(--bk-font);
	font-synthesis: none;
	word-break: keep-all;
}

.bk-civil-renewal,
.bk-civil-renewal input,
.bk-civil-renewal textarea,
.bk-civil-renewal select,
.bk-civil-renewal option,
.bk-civil-renewal button,
.bk-civil-renewal .xe_content,
.bk-civil-renewal .rhymix_content {
	font-family: var(--bk-font) !important;
	font-synthesis: none;
}

.bk-civil-renewal ::selection {
	background: #527a79;
	color: #fff;
}

.bk-civil-renewal :where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--bk-color-primary);
	outline-offset: 3px;
}

.bk-civil-renewal img,
.bk-civil-renewal video,
.bk-civil-renewal iframe {
	max-width: 100%;
}

.bk-civil-renewal:not(.is-index) .bk-subpage-breadcrumb {
	display: none;
}

.bk-civil-renewal:not(.is-index) {
	padding-top: 0 !important;
}

.bk-civil-renewal:not(.is-index) > .body {
	padding-top: 0 !important;
}

.bk-civil-renewal:not(.is-index) .bk-subpage-hero__mobile-breadcrumb {
	display: none;
}

@media (max-width: 1024px) {
	.bk-civil-renewal:not(.is-index) .bk-subpage-hero {
		position: relative;
		display: block;
		height: calc(192 / 360 * 100vw) !important;
		overflow: hidden;
		background-color: #005352;
		background-position: center;
		background-size: cover;
	}

	.bk-civil-renewal:not(.is-index) .bk-subpage-hero__mobile-breadcrumb {
		position: absolute;
		z-index: 2;
		top: calc(92.307692 / 360 * 100vw);
		left: 50%;
		display: flex;
		width: max-content;
		max-width: calc(323.076923 / 360 * 100vw);
		height: calc(15.692308 / 360 * 100vw);
		align-items: flex-start;
		margin: 0;
		opacity: .7;
		transform: translateX(-50%);
	}

	.bk-civil-renewal:not(.is-index) .bk-subpage-hero__mobile-breadcrumb a {
		box-sizing: border-box;
		display: flex;
		width: calc(27.692308 / 360 * 100vw);
		height: calc(15.692308 / 360 * 100vw);
		flex: 0 0 calc(27.692308 / 360 * 100vw);
		align-items: center;
		padding-right: calc(13.846154 / 360 * 100vw);
		border-right: max(.3px, calc(.3 / 390 * 100vw)) solid #94969d;
	}

	.bk-civil-renewal:not(.is-index) .bk-subpage-hero__mobile-breadcrumb a img {
		display: block;
		width: calc(13.846154 / 360 * 100vw);
		height: calc(13.846154 / 360 * 100vw);
		object-fit: contain;
	}

	.bk-civil-renewal:not(.is-index) .bk-subpage-hero__mobile-breadcrumb span,
	.bk-civil-renewal:not(.is-index) .bk-subpage-hero__mobile-breadcrumb strong {
		box-sizing: border-box;
		display: flex;
		width: max-content;
		height: calc(15.692308 / 360 * 100vw);
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		padding: 0 calc(9.230769 / 360 * 100vw);
		color: #fff;
		font-size: calc(11.076923 / 360 * 100vw);
		line-height: 1.4;
		white-space: nowrap;
	}

	.bk-civil-renewal:not(.is-index) .bk-subpage-hero__mobile-breadcrumb span {
		border-right: max(.3px, calc(.3 / 390 * 100vw)) solid #94969d;
		font-weight: 400;
	}

	.bk-civil-renewal:not(.is-index) .bk-subpage-hero__mobile-breadcrumb strong {
		font-weight: 600;
	}

	.bk-civil-renewal:not(.is-index) .bk-subpage-hero > h1 {
		position: absolute;
		z-index: 1;
		right: 0;
		bottom: calc(31.384615 / 360 * 100vw);
		left: 0;
		margin: 0;
		color: #fff;
		font-size: calc(24 / 360 * 100vw);
		font-weight: 600;
		line-height: 1.4;
		text-align: center;
	}
}

@media (min-width: 1025px) {
	.bk-civil-renewal:not(.is-index) {
		--bk-pc-wide: calc(1440 / 1920 * 100vw);
		--bk-pc-standard: calc(1280 / 1920 * 100vw);
		--bk-pc-reading: calc(1280 / 1920 * 100vw);
		--bk-pc-gutter: calc(32 / 1920 * 100vw);
		--bk-pc-header: calc(100 / 1920 * 100vw);
		--bk-pc-hero: calc(280 / 1920 * 100vw);
		--bk-pc-contact: calc(100 / 1920 * 100vw);
		--bk-pc-footer: calc(394 / 1920 * 100vw);
		--bk-pc-text-display: calc(50 / 1920 * 100vw);
		--bk-pc-text-hero: calc(40 / 1920 * 100vw);
		--bk-pc-text-detail: calc(34 / 1920 * 100vw);
		--bk-pc-text-section: calc(30 / 1920 * 100vw);
		--bk-pc-text-card: calc(26 / 1920 * 100vw);
		--bk-pc-text-body: calc(22 / 1920 * 100vw);
		--bk-pc-text-ui: calc(21 / 1920 * 100vw);
		--bk-pc-text-support: calc(19 / 1920 * 100vw);
		--bk-pc-text-meta: calc(18 / 1920 * 100vw);
		--bk-pc-space-1: calc(8 / 1920 * 100vw);
		--bk-pc-space-2: calc(12 / 1920 * 100vw);
		--bk-pc-space-3: calc(16 / 1920 * 100vw);
		--bk-pc-space-4: calc(24 / 1920 * 100vw);
		--bk-pc-space-5: calc(32 / 1920 * 100vw);
		--bk-pc-space-6: calc(40 / 1920 * 100vw);
		--bk-pc-space-7: calc(56 / 1920 * 100vw);
		--bk-pc-space-8: calc(72 / 1920 * 100vw);
		--bk-pc-space-9: calc(96 / 1920 * 100vw);
		--bk-pc-space-10: calc(128 / 1920 * 100vw);
		--bk-pc-control: calc(56 / 1920 * 100vw);
		--bk-pc-button: calc(48 / 1920 * 100vw);
		--bk-pc-radius: calc(12 / 1920 * 100vw);
		--bk-pc-card-column-gap: calc(28 / 1920 * 100vw);
		--bk-pc-card-row-gap: calc(72 / 1920 * 100vw);
		--bk-subpage-content-wide: var(--bk-pc-wide);
		--bk-subpage-content-standard: var(--bk-pc-standard);
		--bk-subpage-content-reading: var(--bk-pc-reading);
		--bk-subpage-header-height: var(--bk-pc-header);
		--bk-subpage-hero-height: var(--bk-pc-hero);
		--bk-subpage-contact-height: var(--bk-pc-contact);
		--bk-subpage-space-section: var(--bk-pc-space-8);
		--bk-subpage-space-page-end: var(--bk-pc-space-10);
		--bk-subpage-title-display: var(--bk-pc-text-display);
		--bk-subpage-title-hero: var(--bk-pc-text-hero);
		--bk-subpage-title-section: var(--bk-pc-text-section);
		--bk-subpage-text-body: var(--bk-pc-text-body);

		/* Existing civil aliases now resolve to the criminal design tokens. */
		--bk-civil-wide: var(--bk-pc-wide);
		--bk-civil-standard: var(--bk-pc-standard);
		--bk-civil-reading: var(--bk-pc-reading);
		--bk-civil-gutter: var(--bk-pc-gutter);
		--bk-civil-space-1: var(--bk-pc-space-1);
		--bk-civil-space-2: var(--bk-pc-space-2);
		--bk-civil-space-3: var(--bk-pc-space-3);
		--bk-civil-space-4: var(--bk-pc-space-4);
		--bk-civil-space-5: var(--bk-pc-space-5);
		--bk-civil-space-6: var(--bk-pc-space-6);
		--bk-civil-space-7: var(--bk-pc-space-7);
		--bk-civil-space-8: var(--bk-pc-space-8);
		--bk-civil-space-9: var(--bk-pc-space-9);
		--bk-civil-space-10: var(--bk-pc-space-10);
		--bk-civil-display: var(--bk-pc-text-display);
		--bk-civil-section: var(--bk-pc-text-section);
		--bk-civil-card: var(--bk-pc-text-card);
		--bk-civil-body: var(--bk-pc-text-body);
		--bk-civil-ui: var(--bk-pc-text-ui);
		--bk-civil-meta: var(--bk-pc-text-meta);
	}

	.bk-civil-renewal:not(.is-index) .sub_top_banner,
	.bk-civil-renewal:not(.is-index) .bk-subpage-hero {
		height: var(--bk-pc-hero) !important;
		min-height: 0;
	}

	.bk-civil-renewal:not(.is-index) .bk-subpage-hero h1 {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding-top: calc(64 / 1920 * 100vw);
		color: #fff;
		font-size: var(--bk-pc-text-hero);
		font-weight: 650;
		letter-spacing: -.025em;
		transform: translateY(calc(8 / 1920 * 100vw));
	}

	/* Final criminal PC-system dimensions, loaded after the base breadcrumb. */
	.bk-civil-renewal:not(.is-index) .bk-subpage-breadcrumb {
		display: flex;
		width: min(calc(100% - (var(--bk-pc-gutter) * 2)), var(--bk-pc-wide));
		height: calc(24 / 1920 * 100vw);
		margin: var(--bk-pc-space-4) auto var(--bk-pc-space-8);
		font-size: var(--bk-pc-text-meta);
		line-height: 1.35;
	}

	.bk-civil-renewal:not(.is-index) .bk-subpage-breadcrumb > a,
	.bk-civil-renewal:not(.is-index) .bk-subpage-breadcrumb__menu,
	.bk-civil-renewal:not(.is-index) .bk-subpage-breadcrumb__menu button {
		height: calc(24 / 1920 * 100vw);
	}

	.bk-civil-renewal:not(.is-index) .bk-subpage-breadcrumb > a {
		padding-right: calc(40 / 1920 * 100vw);
		padding-left: calc(12 / 1920 * 100vw);
	}

	.bk-civil-renewal:not(.is-index) .bk-subpage-breadcrumb > .bk-subpage-breadcrumb__home {
		padding-right: calc(16 / 1920 * 100vw);
	}

	.bk-civil-renewal:not(.is-index) .bk-subpage-breadcrumb__home img {
		width: calc(20 / 1920 * 100vw);
		height: calc(20 / 1920 * 100vw);
	}

	.bk-civil-renewal:not(.is-index) .bk-subpage-breadcrumb__menu button {
		width: calc(176 / 1920 * 100vw);
		padding-left: calc(12 / 1920 * 100vw);
	}

	.bk-civil-renewal:not(.is-index) .bk-subpage-breadcrumb__menu button::after {
		font-size: var(--bk-pc-text-ui);
	}

	.bk-civil-renewal:not(.is-index) .bk-subpage-breadcrumb__menu ul {
		top: calc(36 / 1920 * 100vw);
		width: calc(190 / 1920 * 100vw);
	}

	.bk-civil-renewal:not(.is-index) .bk-subpage-breadcrumb__menu li a {
		padding: calc(8 / 1920 * 100vw) calc(12 / 1920 * 100vw);
		font-size: var(--bk-pc-text-meta);
		line-height: 1.4;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bk-civil-renewal *,
	.bk-civil-renewal *::before,
	.bk-civil-renewal *::after {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}