/* =========================================================================
   청년뉴딜 프로토타입 v3 — 절충 (KRDS 구조 + 배너 테마 레이어)
   - 구조·컴포넌트·타이포·간격: KRDS(krds.min.css) 토큰·클래스 유지
   - 영역 테마: CSS 커스텀 프로퍼티(--theme-*)를 섹션 단위로 스위칭
   - 테마색 적용 범위: 뱃지 / 섹션 배경 틴트 / 탭 활성 표시 / 카드 포인트 한정
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Pretendard GOV @font-face 직접 선언 (KRDS CSS에는 @font-face가 없음)
   ------------------------------------------------------------------------- */
@font-face {
	font-family: "Pretendard GOV";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("../../../assets/krds/fonts/PretendardGOV-Regular.subset.woff2") format("woff2"),
		url("../../../assets/krds/fonts/PretendardGOV-Regular.subset.woff") format("woff");
}
@font-face {
	font-family: "Pretendard GOV";
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url("../../../assets/krds/fonts/PretendardGOV-Medium.subset.woff2") format("woff2"),
		url("../../../assets/krds/fonts/PretendardGOV-Medium.subset.woff") format("woff");
}
@font-face {
	font-family: "Pretendard GOV";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("../../../assets/krds/fonts/PretendardGOV-Bold.subset.woff2") format("woff2"),
		url("../../../assets/krds/fonts/PretendardGOV-Bold.subset.woff") format("woff");
}

/* -------------------------------------------------------------------------
   2. krds.min.css 원격 경로(www.krds.go.kr) 보정 → 로컬 아이콘으로 교체
   ------------------------------------------------------------------------- */
/* 마스트헤드 태극기 아이콘: 원본은 외부 URL mask — 로컬 컬러 SVG로 대체 */
#krds-masthead .toggle-head .nuri-txt::before {
	-webkit-mask-image: none !important;
	mask-image: none !important;
	background-color: transparent !important;
	background-image: url("../../../assets/krds/krds-uiux/resources/img/component/icon/ico_flag.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
/* 바로가기(새 창) 아이콘 */
.svg-icon.ico-go {
	-webkit-mask-image: url("../../../assets/krds/krds-uiux/resources/img/component/icon/ico_go.svg") !important;
	mask-image: url("../../../assets/krds/krds-uiux/resources/img/component/icon/ico_go.svg") !important;
}
/* 푸터 식별자 KRDS 로고: 외부 URL 배경 — 자산 미보유로 비표시(텍스트 식별자만 사용) */
.krds-identifier .logo {
	display: none;
}

/* -------------------------------------------------------------------------
   3. 영역 테마 레이어 — CSS 커스텀 프로퍼티 (섹션/탭 단위 스위칭)
   --theme-bg        : 섹션 배경 틴트 (파스텔 45% — gray-90 텍스트 대비 13.5:1 이상 실측)
   --theme-bg-strong : 배너 원본 파스텔 (칩 라벨 배경 — gray-90 텍스트 대비 10.7:1 이상 실측)
   --theme-accent    : 배너 헤더 포인트색 (장식 전용: 카드 상단 보더·소제목 바·히어로 하이라이트)
   --theme-dark      : 배너 다크색 (탭 활성 텍스트·언더라인 — 흰 배경 대비 6.5:1 이상 실측)
   ------------------------------------------------------------------------- */
.theme-leap {
	--theme-bg: #e5f3fa;
	--theme-bg-strong: #c5e4f3;
	--theme-accent: #44b8de;
	--theme-dark: #005c78;
}
.theme-experience {
	--theme-bg: #f2f6df;
	--theme-bg-strong: #e1ecb8;
	--theme-accent: #59b05a;
	--theme-dark: #006030;
}
.theme-recovery {
	--theme-bg: #f1e8f2;
	--theme-bg-strong: #dfcce3;
	--theme-accent: #a075b1;
	--theme-dark: #4e3264;
}
.theme-infra {
	--theme-bg: #fdecd1;
	--theme-bg-strong: #fbd598;
	--theme-accent: #f29427;
	--theme-dark: #99451a;
}

/* -------------------------------------------------------------------------
   4. 헤더 (GNB 없음 — 단순화)
   ------------------------------------------------------------------------- */
/* v1 #header와 동일: 흰 배경 + 1px 하단 보더 + 로고(42px)에 맞춘 14px 상하 여백 */
#krds-header {
	background: #fff;
	border-bottom: 1px solid #e6e8ea;
	box-shadow: none;
}
#krds-header .inner {
	padding-top: 14px !important;    /* KRDS 비대칭 패딩(12/16) 덮어쓰기 — v1과 동일 대칭 센터링 */
	padding-bottom: 14px !important;
}
#krds-header .header-branding {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 0;            /* KRDS 8rem 제거 — v1과 동일 높이 */
}
/* KRDS 기본 로고(외부 URL 배경)를 청년뉴딜 로고 이미지로 교체 */
#krds-header .header-container .logo {
	width: auto;
	height: auto;
}
#krds-header .header-container .logo a {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: auto;
	background-image: none !important;
}
#krds-header .logo img {
	display: block;
	width: 13rem;
	height: auto;
}
/* v1과 동일: 로고는 모바일에서도 130px 유지, 내비만 600px 이하에서 17px */
@media screen and (max-width: 600px) {
	#krds-header .header-nav .policy-link {
		font-size: 17px;
	}
}
#krds-header .header-nav {
	margin-left: auto;
}
#krds-header .header-nav .policy-link {
	font-size: 19px;          /* v1과 동일 */
	font-weight: 400;
	color: var(--krds-color-light-gray-90, #1e2124);
	text-decoration: none;
}
#krds-header .header-nav .policy-link b {
	font-weight: var(--krds-font-weight-bold, 700);
}
#krds-header .header-nav .policy-link:hover,
#krds-header .header-nav .policy-link:focus {
	text-decoration: underline;
}

/* 관계부처 합동 락업 — 배너 01 우상단 구조 (정부상징 심볼 + 텍스트) */
.hero .gov-lockup {
	position: absolute;
	top: 20px;
	left: 0;
	margin: 0;
}
/* 관계부처 합동 공식 락업 통이미지 (엠블럼+정부상징체 텍스트) — v1과 통일 */
.hero .gov-lockup img {
	display: block;
	height: 30px;
	width: auto;
}

/* -------------------------------------------------------------------------
   5. 레이아웃 공통 (콘텐츠 최대 폭 1200px, 본문 17px·행간 1.5는 KRDS 토큰)
   ------------------------------------------------------------------------- */
main .inner,
#krds-header .inner,
#krds-footer .inner {
	max-width: 120rem;
}
.loading-msg {
	padding: 4rem 0;
	color: var(--krds-color-light-gray-70, #464c53);
	text-align: center;
}
.error-msg {
	padding: 4rem 0;
	color: var(--krds-color-light-point-50, #d63d4a);
	text-align: center;
	font-weight: var(--krds-font-weight-bold, 700);
}

/* -------------------------------------------------------------------------
   6. 히어로 — KRDS 타이포 스케일 + v1 차용 요소(파스텔 배경·글자 타일·네이비 카피)
   ------------------------------------------------------------------------- */
.hero {
	position: relative;
	overflow: hidden;
	background: radial-gradient(125% 130% at 50% -15%, #ECF7FE 0%, #D2EAF8 40%, #BEDFF5 70%, #AFD4F1 100%);
}
.hero .inner {
	position: relative;
	z-index: 1;
	padding-top: 52px;
	padding-bottom: 56px;
	text-align: center;
}
.hero h1 { margin: 0; line-height: 1.25; }
/* 배너 이미지: 기본 숨김(PC). 모바일에서만 풀블리드로 노출(아래 @media max-width:1023) */
.hero .hero-banner-img {
	display: none;
	width: 100%;
	height: auto;
}
.hero .hero-visual {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 26px;
}
.hero .hero-copy {
	display: inline-block;
	padding: 8px 22px;
	border-radius: 999px;
	background: #1b3f74;
	color: #fff;
	font-size: clamp(19px, 2.8vw, 29px);
	font-weight: 700;
	line-height: 1.25;       /* KRDS line-height 누수 방지 — v1과 동일 고정 */
	letter-spacing: -0.01em;
	box-shadow: 0 6px 16px rgba(16, 56, 92, 0.20);
}
.hero .brand-letters {
	display: inline-flex;
	gap: 10px;
}
.hero .tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.32em;
	height: 1.32em;
	border-radius: 0.34em;
	color: #fff;
	font-size: clamp(40px, 8vw, 76px);
	font-weight: 800;
	line-height: 1;
	text-shadow: 0 3px 0 rgba(0, 0, 0, 0.10);
	box-shadow: 0 10px 20px rgba(16, 56, 92, 0.22);
}
.hero .tile-1 { background: linear-gradient(155deg, #4480f2, #2f63e0); transform: rotate(-4deg); }
.hero .tile-2 { background: linear-gradient(155deg, #6f5ce8, #5040cf); transform: rotate(3deg); }
.hero .tile-3 { background: linear-gradient(155deg, #9f53d3, #7e34b8); transform: rotate(-3deg); }
.hero .tile-4 { background: linear-gradient(155deg, #e65fa9, #d63d8e); transform: rotate(4deg); }
.hero .hero-sub {
	display: inline-block;
	max-width: 92%;
	margin-top: 40px;
	padding: 10px 22px;
	border-radius: 999px;
	background: #16243f;
	color: #fff;
	font-size: clamp(15px, 2.1vw, 20px);
	font-weight: 700;
	line-height: 1.35;
}
.hero .hero-sub::after {
	content: " ›";
	color: #7fb0ff;
	font-weight: 800;
	line-height: 1.35;       /* KRDS ::after line-height 누수 방지 — v1과 동일 고정 */
}
/* "청년뉴딜" 글자 타일 — v1 레터링의 절제판: 영역 4색 파스텔 배경 + 하단
   액센트 보더 + 미세 기울임. 텍스트색 gray-90 유지(파스텔 원색 vs gray-90
   10.7:1 이상 — v3 칩과 동일 조합 기실측) */
/* v3 구 레터링(.hero-letters/.hero-mark) 제거 — v1과 동일한 .brand-letters/.tile 사용 */
/* 장식 도형 (v1 차용, 더 절제) — aria-hidden, 비텍스트 */
.hero .deco {
	position: absolute;
	pointer-events: none;
	line-height: 1;
	opacity: 0.85;
}
.hero .deco::before { content: "✦"; display: block; }
.hero .deco-1 { left: 8%;  top: 30%;    font-size: 30px; color: #4f9fe6; transform: rotate(-12deg); }
.hero .deco-2 { left: 16%; bottom: 24%; font-size: 18px; color: #6f5ce8; }
.hero .deco-3 { right: 10%; top: 40%;   font-size: 38px; color: #e65fa9; transform: rotate(10deg); }
.hero .deco-4 { right: 18%; bottom: 26%; font-size: 22px; color: #2f63e0; }

@media (min-width: 1024px) {
	.hero .inner { padding-top: 72px; padding-bottom: 72px; }
}

/* === 반응형 히어로 토글 ===
   모바일/태블릿(<1024): 풀블리드 배너 이미지로 대체. CSS 텍스트(관계부처 합동·슬로건·서브)는
   sr-only로 숨겨 접근성·SEO 유지(이미지는 동일 내용을 시각 전달, aria-hidden). PC(≥1024)는 위 CSS 히어로. */
@media (max-width: 1023px) {
	.hero { padding: 0; }
	.hero .inner { max-width: none; padding: 0; }
	.hero .hero-banner-img { display: block; }
	.hero .gov-lockup,
	.hero .hero-title,
	.hero .hero-sub,
	.hero .deco {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* -------------------------------------------------------------------------
   7. 영역 탭 (KRDS Tab line full) — 활성 표시만 영역 테마색
   ------------------------------------------------------------------------- */
.programs-section {
	padding: 4rem 0 6.4rem;
}
.category-tab-area .tab.line li {
	/* KRDS 탭 토큰을 테마 변수로 매핑 (테마 미지정 시 KRDS 기본 Primary) */
	--krds-tab--line-button-color-line-active: var(--theme-dark, var(--krds-color-light-primary-60, #0b50d0));
	--krds-tab--line-button-color-text-active: var(--theme-dark, var(--krds-color-light-primary-60, #0b50d0));
}
.category-tab-area .tab .btn-tab:not(:disabled):hover {
	background-color: var(--theme-bg, var(--krds-color-light-gray-5, #f4f5f6));
}
.category-tab-area .tab.line .active .btn-tab {
	font-weight: var(--krds-font-weight-bold, 700);
}

/* -------------------------------------------------------------------------
   8. 영역 패널 — 섹션 배경 틴트(파스텔 45%) + 코랄 영역 뱃지(KRDS Point)
   ------------------------------------------------------------------------- */
.tab-conts.area-panel {
	background-color: var(--theme-bg, #fff);
	border-radius: var(--krds-radius-medium4, 1.6rem);
	padding: 2.4rem 1.6rem 3.2rem;
}
.cat-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.2rem;
	margin: 0 0 2rem;
	font-size: var(--krds-mobile-font-size-heading-medium, 2.2rem);
	font-weight: var(--krds-font-weight-bold, 700);
	color: var(--krds-color-light-gray-90, #1e2124);
	word-break: keep-all;
}
/* 영역 뱃지: 배너의 코랄레드(#E9546F)를 KRDS Point(#d63d4a)로 수렴 —
   흰 텍스트 대비 4.54:1 실측. .krds-badge.bg-point 토큰을 그대로 사용 */
.cat-head .krds-badge.bg-point {
	border-radius: var(--krds-radius-max, 999rem);
	padding: 0.4rem 1.4rem;
	font-size: var(--krds-pc-font-size-label-small, 1.5rem);
	font-weight: var(--krds-font-weight-bold, 700);
}

/* 인프라 소제목 그룹 */
.subheading {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 2.8rem 0 1.2rem;
	font-size: var(--krds-pc-font-size-heading-small, 1.9rem);
	font-weight: var(--krds-font-weight-bold, 700);
	color: var(--theme-dark, var(--krds-color-light-gray-90, #1e2124));
	word-break: keep-all;
}
.subheading::before {
	content: "";
	flex-shrink: 0;
	width: 0.5rem;
	height: 1.8rem;
	border-radius: 0.3rem;
	background-color: var(--theme-accent, currentColor); /* 장식 — aria 비대상 */
}
.subheading:first-of-type {
	margin-top: 0;
}

/* 하위 탭 (경험·회복) — 같은 KRDS line 탭, 활성색은 패널 테마 상속 */
.subtab-area {
	margin-bottom: 0.4rem;
}
.subtab-area .tab.line li {
	--krds-tab--line-button-color-line-active: var(--theme-dark, var(--krds-color-light-primary-60, #0b50d0));
	--krds-tab--line-button-color-text-active: var(--theme-dark, var(--krds-color-light-primary-60, #0b50d0));
}
.subtab-area .tab .btn-tab:not(:disabled):hover {
	background-color: rgba(255, 255, 255, 0.6);
}
.subtab-area .tab.line .active .btn-tab {
	font-weight: var(--krds-font-weight-bold, 700);
}
.subtab-area .tab-conts {
	padding-top: 2rem;
}

/* -------------------------------------------------------------------------
   9. 프로그램 카드 (KRDS structured list 기반) — 카드 포인트만 테마색
   ------------------------------------------------------------------------- */
.program-list {
	display: grid;
	grid-template-columns: 1fr; /* 모바일 1열 */
	gap: 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.program-list > li.structured-item {
	display: flex;
	background-color: var(--krds-color-light-gray-0, #fff);
	border: 1px solid var(--krds-color-light-gray-20, #e6e8ea);
	border-top: 0.4rem solid var(--theme-accent, var(--krds-color-light-primary-50, #256ef4)); /* 카드 포인트 */
	border-radius: var(--krds-radius-medium2, 1.2rem);
	padding: 2rem 2rem 2.4rem;
}
.program-list > li.structured-item > .in {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	width: 100%;
}
.program-name {
	margin: 0;
	font-size: var(--krds-pc-font-size-heading-small, 1.9rem);
	font-weight: var(--krds-font-weight-bold, 700);
	color: var(--krds-color-light-gray-90, #1e2124);
	word-break: keep-all;
}
.program-fields {
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	margin: 0;
}
.program-fields .field > dt {
	margin-bottom: 0.6rem;
}
.program-fields .field > dd {
	margin: 0;
}
/* 칩 라벨: 배너 원본 파스텔 배경 + gray-90 텍스트 (대비 10.7:1 이상 실측) */
.field-label {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 1rem;
	border-radius: var(--krds-radius-max, 999rem);
	background-color: var(--theme-bg-strong, var(--krds-color-light-gray-10, #f1f1f4));
	color: var(--krds-color-light-gray-90, #1e2124);
	font-size: var(--krds-pc-font-size-label-xsmall, 1.3rem);
	font-weight: var(--krds-font-weight-bold, 700);
}
.field-text {
	font-size: var(--krds-pc-font-size-body-medium, 1.7rem);
	line-height: var(--krds-line-height-base, 1.5);
	color: var(--krds-color-light-gray-90, #1e2124);
	word-break: keep-all;
}
.field-text.pre-line {
	white-space: pre-line; /* howToApply \n 줄바꿈 유지 */
}
/* 바로가기: 버튼 위계는 KRDS Primary 유지 (테마색 적용 안 함) */
.program-list .c-btn {
	margin-top: auto;
	text-align: right;
}
.program-list .c-btn .krds-btn {
	gap: 0.4rem;
}
.program-list .c-btn .krds-btn .svg-icon {
	width: var(--krds-icon--size-medium, 2rem);
	height: var(--krds-icon--size-medium, 2rem);
}

/* 반응형: 768px 2열 / 1024px 여백 확장 */
@media (min-width: 768px) {
	.program-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}
	.tab-conts.area-panel {
		padding: 3.2rem 2.8rem 4rem;
	}
	.cat-head {
		font-size: var(--krds-pc-font-size-heading-medium, 2.4rem);
	}
}
@media (min-width: 1024px) {
	.tab-conts.area-panel {
		padding: 4rem 4rem 4.8rem;
	}
	.program-list > li.structured-item {
		padding: 2.4rem 2.4rem 2.8rem;
	}
}

/* -------------------------------------------------------------------------
   10. 푸터 보정 (로고 이미지 사용)
   ------------------------------------------------------------------------- */
#krds-footer .f-logo {
	width: auto;
	height: auto;
	background-image: none !important;
}
#krds-footer .f-logo img {
	display: block;
	width: 13rem;
	height: auto;
}