@charset "utf-8";

/* ============================== 토큰 */
:root {
	--rc-navy: #1e3a5f;
	--rc-navy-deep: #14283f;
	--rc-blue: #2f6fb5;
	--rc-text: #1f2937;
	--rc-muted: #6b7280;
	--rc-light: #9aa4b2;
	--rc-line: #e5e9ef;
	--rc-bg: #ffffff;
	--rc-bg-gray: #f4f7fb;
	--rc-chip: #f2f5f9;
	--rc-max: 1280px;
	--rc-pad: 24px;
}

.content-wrapper {
	margin-bottom: 0 !important;
}

html {
	scroll-behavior: smooth;
}

/* ============================== 공통 레이아웃 */
.rc-head,
.rc-section {
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	color: var(--rc-text);
	background: var(--rc-bg);
}

.rc-inner {
	max-width: var(--rc-max);
	margin: 0 auto;
	padding: 0 var(--rc-pad);
}

.rc-section {
	padding: 100px 0;
	scroll-margin-top: 90px;
}

.rc-section--gray {
	background: var(--rc-bg-gray);
}

/* ============================== 페이지 헤더 + 탭 */
.rc-head {
	padding: 48px 0 0;
}

.rc-head__title {
	margin: 0 0 26px;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--rc-navy-deep);
}

.rc-tabs {
	display: flex;
	gap: 34px;
	border-bottom: 1px solid var(--rc-line);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.rc-tabs::-webkit-scrollbar {
	display: none;
}

.rc-tab {
	position: relative;
	flex: none;
	padding: 0 2px 13px;
	font-size: 14px;
	font-weight: 500;
	color: var(--rc-light);
	white-space: nowrap;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.rc-tab:hover {
	color: var(--rc-navy);
}

.rc-tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--rc-navy-deep);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.rc-tab.is-active {
	color: var(--rc-navy-deep);
	font-weight: 700;
}

.rc-tab.is-active::after {
	opacity: 1;
}

/* ============================== 메인 배너 (영상) */
.rc-banner {
	margin-top: 44px;
	width: 100%;
	height: clamp(220px, 27vw, 420px);
	background: #0f1c2b;
	overflow: hidden;
}

.rc-banner__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ============================== 섹션 타이틀 */
.rc-title {
	margin: 0 0 16px;
	font-size: 36px;
	font-weight: 600;
	letter-spacing: -0.03em;
	color: #111827;
}

.rc-desc {
	margin: 0;
	font-size: 13px;
	color: var(--rc-muted);
	word-break: keep-all;
}

/* ============================== 인재상 */
.rc-talent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 40px;
}

.rc-talent__card {
	padding: 34px 30px 38px;
	background: var(--rc-bg);
	border: 1px solid var(--rc-line);
	border-radius: 8px;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.rc-talent__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(20, 40, 63, 0.07);
}

.rc-talent__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 48px;
	background: var(--rc-chip);
	border-radius: 8px;
}

.rc-talent__name {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	color: var(--rc-navy-deep);
}

.rc-talent__desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.8;
	color: var(--rc-light);
	word-break: keep-all;
}

/* ============================== 복리후생 */
.rc-benefit {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 40px;
}

/* 같은 줄의 카드끼리 높이를 맞춘다 */
.rc-benefit__card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 32px 30px 34px;
	background: var(--rc-bg);
	border-radius: 12px;
	overflow: hidden;
}

.rc-benefit__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}

.rc-benefit__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--rc-navy-deep);
}

.rc-benefit__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--rc-blue);
	background: #e9f1fb;
	border-radius: 8px;
}

.rc-benefit__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rc-benefit__list li {
	padding: 16px 18px;
	background: #f7f9fc;
	border-radius: 8px;
}

.rc-benefit__list strong {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--rc-navy-deep);
}

.rc-benefit__list p {
	margin: 0;
	font-size: 12px;
	line-height: 1.75;
	color: var(--rc-light);
	word-break: keep-all;
}

/* ============================== 채용절차
   첫 원은 제목 왼쪽 끝, 마지막 원은 오른쪽 끝에 맞추고 사이 간격을 균등하게 둔다.
   단계 폭을 원 크기(44px)로 고정하고 글자는 원 기준 가운데로 넘치게 한다. */
.rc-steps {
	position: relative;
	display: flex;
	justify-content: space-between;
	margin: 72px 0 0;
	padding: 0;
	list-style: none;
}

/* 전체 연결선. 05 앞의 링 점에서 끝나고 점과 05 사이는 비워 둔다
   (61px = 원 44px + 원 왼쪽 끝에서 점 중심까지 17px) */
.rc-steps::before {
	content: "";
	position: absolute;
	top: 22px;
	left: 22px;
	right: 61px;
	height: 1px;
	background: #d7dfe9;
}

/* 04 → 05 구간 강조선: 4번째 원 오른쪽 끝부터 링 점까지 */
.rc-steps::after {
	content: "";
	position: absolute;
	top: 22px;
	left: calc(44px + (100% - 44px) * 0.75);
	right: 61px;
	height: 1px;
	background: #8d9ab3;
}

/* min-width: 0 이 없으면 글자 길이만큼 폭이 늘어나 원 간격이 틀어진다 */
.rc-step {
	position: relative;
	z-index: 1;
	flex: 0 0 44px;
	width: 44px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* 마지막 단계 바로 앞의 진행 점 */
.rc-step--last::after {
	content: "";
	position: absolute;
	top: 17px;
	left: -22px;
	width: 10px;
	height: 10px;
	border: 2px solid var(--rc-navy);
	border-radius: 50%;
	background: var(--rc-bg);
	box-shadow: 0 0 0 3px #c9d4e6;
}

.rc-step__circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 20px;
	font-size: 13px;
	font-weight: 700;
	color: var(--rc-text);
	background: var(--rc-bg);
	border: 1px solid #d7dfe9;
	border-radius: 50%;
}

.rc-step--last .rc-step__circle {
	color: #ffffff;
	background: var(--rc-navy);
	border-color: var(--rc-navy);
}

.rc-step__name {
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: 700;
	color: #111827;
	white-space: nowrap;
}

.rc-step__desc {
	font-size: 13px;
	line-height: 1.6;
	color: #4b5563;
	white-space: nowrap;
}

/* ============================== 반응형 */
@media (max-width: 900px) {
	.rc-benefit {
		grid-template-columns: 1fr;
	}

	.rc-steps {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 32px 0;
	}

	.rc-step {
		flex: 0 0 33.333%;
	}

	.rc-steps::before,
	.rc-steps::after,
	.rc-step--last::after {
		display: none;
	}

	.rc-step__name,
	.rc-step__desc {
		white-space: normal;
	}
}

@media (max-width: 768px) {
	:root {
		--rc-pad: 16px;
	}

	.rc-head {
		padding-top: 32px;
	}

	.rc-head__title {
		margin-bottom: 20px;
		font-size: 22px;
	}

	.rc-tabs {
		gap: 22px;
	}

	.rc-banner {
		margin-top: 28px;
		height: 200px;
	}

	.rc-section {
		padding: 60px 0;
	}

	.rc-title {
		font-size: 24px;
	}

	.rc-talent {
		grid-template-columns: 1fr;
		gap: 14px;
		margin-top: 28px;
	}

	.rc-talent__icon {
		margin-bottom: 26px;
	}

	.rc-benefit {
		gap: 16px;
		margin-top: 28px;
	}

	.rc-benefit__card {
		padding: 26px 22px 28px;
	}

	.rc-steps {
		margin-top: 44px;
	}

	.rc-step {
		flex: 0 0 50%;
	}

}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.rc-talent__card {
		transition: none;
	}
}