/* ==========================================================================
   청년뉴딜 프로토타입 v1 — 현행 배너 디자인 재현
   - 페이지 프레임: KRDS 의무 레이어(마스트헤드·식별자·스킵링크·푸터) 구조 차용
   - 콘텐츠 영역: 배너 01/04/07/09.png 톤앤매너 (SPEC.md §2 v1-current 참조)
   ========================================================================== */

/* ----- Pretendard GOV @font-face (../../assets/krds/fonts/) ----- */
@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");
}

/* ----- 리셋·베이스 ----- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Pretendard GOV", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #1e2124;
  background: #fff;
  word-break: keep-all;
}
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; cursor: pointer; }

.inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.preline { white-space: pre-line; }

/* 포커스 표시 (제거 금지) */
:focus-visible {
  outline: 3px solid #0b50d0;
  outline-offset: 2px;
}

/* ----- 영역 테마 변수 (SPEC §2 v1-current hex)
   --bg 파스텔 배경 / --point 헤더 포인트 / --dark 버튼
   --head 칩·표 머리글용 심화 톤(흰 글자 대비 4.5:1 충족용으로 포인트 색을 어둡게 보정) ----- */
[data-theme="leap"]       { --bg: #C5E4F3; --point: #44B8DE; --dark: #005C78; --head: #0E7196; }
[data-theme="experience"] { --bg: #E1ECB8; --point: #59B05A; --dark: #006030; --head: #2E7D32; }
[data-theme="recovery"]   { --bg: #DFCCE3; --point: #A075B1; --dark: #4E3264; --head: #7B5290; }
[data-theme="infra"]      { --bg: #FBD598; --point: #F29427; --dark: #99451A; --head: #A8550F; }

/* ==========================================================================
   1. 페이지 프레임
   ========================================================================== */

/* 건너뛰기 링크 */
#skip-link a {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 1000;
  display: inline-block;
  padding: 12px 24px;
  background: #043053;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
#skip-link a:focus { top: 0; }

/* 마스트헤드 */
#masthead {
  background: #f0f2f5;
  border-bottom: 1px solid #e1e4e8;
}
#masthead .inner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-size: 14px;
  color: #33363d;
}
#masthead .flag {
  flex: none;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: linear-gradient(180deg, #c73336 50%, #29508c 50%);
}

/* 헤더 */
#header { background: #fff; border-bottom: 1px solid #e6e8ea; }
#header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}
#header .logo-link { display: inline-flex; }
/* 우측 내비 — 원본 .youthPolicy 버튼 재현(19px, 모바일 17px) */
#header .header-nav .policy-link {
  font-size: 19px;
  font-weight: 400;
  color: #1e2124;
  text-decoration: none;
}
#header .header-nav .policy-link b { font-weight: 700; }
#header .header-nav .policy-link:hover,
#header .header-nav .policy-link:focus { text-decoration: underline; }
@media screen and (max-width: 600px) {
  #header .header-nav .policy-link { font-size: 17px; }
}

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

/* 푸터 */
#footer {
  background: #f4f5f7;
  border-top: 1px solid #e1e4e8;
  margin-top: 0;
  padding: 40px 0 28px;
  font-size: 15px;
  color: #464b52;
}
#footer .f-logo { margin-bottom: 16px; }
#footer .info-addr { margin-bottom: 4px; }
#footer .info-cs strong { color: #1e2124; margin-right: 8px; }
#footer .f-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 18px 0 10px;
}
#footer .f-menu a {
  text-decoration: none;
  color: #33363d;
}
#footer .f-menu a:hover,
#footer .f-menu a:focus { text-decoration: underline; }
#footer .f-menu a.point {
  font-weight: 700;
  color: #a61e30; /* 개인정보처리방침 강조 */
}
#footer .f-copy { font-size: 14px; color: #5d636b; }
#footer .identifier {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #dadde1;
  font-size: 14px;
  color: #33363d;
}

/* ==========================================================================
   2. 히어로 — 배너 01.png 재현 (파스텔 블루 + 멀티컬러 라운드 레터링)
   ========================================================================== */
.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;   /* DOM은 글자→카피 순, 화면은 카피가 위 */
  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(v3) line-height 누수 방지 — v1·v3 동일 고정 */
  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(v3) ::after line-height 누수 방지 — v1·v3 동일 고정 */
}
/* 반짝이 데코 (배너 ✦ 모티프) */
.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; }

/* === 반응형 히어로 토글 ===
   모바일/태블릿(<1024): 풀블리드 배너 이미지로 대체. CSS 텍스트(관계부처 합동·슬로건·서브)는
   sr-only로 숨겨 접근성·SEO 유지(이미지는 동일 내용을 시각 전달, aria-hidden). PC(≥1024)는 위 CSS 히어로. */
@media (max-width: 1023px) {
  .hero .inner { max-width: none; padding: 0; }
  .hero .hero-banner-img { display: block; }
  .hero .gov-lockup,
  .hero #hero-slogan,
  .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;
  }
}

/* ==========================================================================
   3. 영역 탭 (WAI-ARIA tablist)
   ========================================================================== */
.tabs-nav {
  background: #fff;
  border-bottom: 1px solid #e6e8ea;
}
.tablist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 18px 0;
}
.tab {
  appearance: none;
  border: 2px solid #c9ccd1;
  background: #fff;
  color: #1e2124;
  font-size: 18px;
  font-weight: 700;
  padding: 12px 10px;
  border-radius: 999px;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.tab:hover { border-color: var(--head); color: var(--head); }
.tab[aria-selected="true"] {
  background: var(--head);
  border-color: var(--head);
  color: #fff;
}

/* 하위 탭 (경험·회복) */
.subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 18px;
}
.subtab {
  appearance: none;
  border: 2px solid var(--head);
  background: #fff;
  color: var(--dark);
  font-size: 16px;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 999px;
  transition: background-color 0.15s, color 0.15s;
}
.subtab:hover { background: var(--bg); }
.subtab[aria-selected="true"] {
  background: var(--head);
  color: #fff;
}

/* ==========================================================================
   4. 영역 패널 — 파스텔 배경 + 코랄 뱃지 + 캐치프레이즈
   ========================================================================== */
.panel {
  padding: 32px 0 56px;
}
.panel[hidden] { display: none; }

/* 영역 배경 카드 — 풀블리드 띠가 아니라 콘텐츠 폭(.inner)에만 감싸도록 (v3 .area-panel 대응) */
.panel-body {
  background: var(--bg);
  border-radius: 20px;
  padding: 24px 16px 32px;
}

.cat-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--point);
  margin-bottom: 26px;
}
/* 영역 뱃지 — 코랄레드 #E9546F (대형 굵은 글자: 대비 3:1 이상 충족) */
.cat-badge {
  display: inline-block;
  background: #E9546F;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  padding: 5px 22px;
  border-radius: 999px;
  box-shadow: 0 2px 5px rgba(122, 22, 44, 0.25);
}
.cat-catch {
  color: var(--dark);
  font-size: clamp(21px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* 인프라 소제목 그룹 (배너 09.png 핀 마커 모티프) */
.subheading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 30px 0 14px;
  color: var(--dark);
  font-size: 20px;
  font-weight: 700;
}
.subheading::before {
  content: "";
  flex: none;
  width: 15px; height: 15px;
  background: radial-gradient(circle at 50% 50%, #fff 3px, var(--head) 3.5px);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

/* ==========================================================================
   5. 프로그램 표 — 배너의 "프로그램 | 주요 내용 및 지원" 테이블 재현
   ========================================================================== */
.program-table {
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 4px 14px rgba(40, 40, 60, 0.08);
}
.program-table + .program-table { margin-top: 24px; }

.table-head {
  display: none; /* 모바일에선 숨김 — 카드 내부 sr-only 라벨이 의미 제공 */
  gap: 6px;
  margin-bottom: 6px;
}
.table-head .th {
  background: var(--head);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  padding: 9px 8px;
  border-radius: 10px;
}

.program-row {
  display: block;
  padding: 16px 4px;
}
.program-row + .program-row { border-top: 1px dashed #d9cfc9; }

.program-name {
  color: var(--dark);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 10px;
}

/* 메모지형 카드 #FDF5F2 — 우하단 접힌 모서리 모티프 */
.memo-card {
  position: relative;
  background: linear-gradient(315deg, transparent 17px, #FDF5F2 0);
  border-radius: 12px;
  padding: 20px 22px 18px;
}
.memo-card::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 0; height: 0;
  border-top: 17px solid #e9d3c8;
  border-right: 17px solid transparent;
}

.program-desc { margin-bottom: 12px; }

.field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
}
.field .chip {
  flex: none;
  display: inline-block;
  margin-top: 3px;
  background: var(--head);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  padding: 3px 12px;
  border-radius: 7px;
  letter-spacing: 0.02em;
}
.field .field-text {
  flex: 1;
  min-width: 0;
  font-size: 16px;
}

/* 알약형 바로가기 버튼 (↗) */
.card-actions {
  text-align: right;
  margin-top: 14px;
  padding-right: 14px; /* 접힌 모서리 회피 */
}
.go-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--dark);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 22px;
  border-radius: 999px;
  transition: filter 0.15s;
}
.go-link:hover,
.go-link:focus { filter: brightness(1.25); text-decoration: underline; }
.go-link .arrow { font-size: 14px; line-height: 1; }

/* 데이터 로드 실패 안내 */
.load-error {
  margin: 60px auto;
  text-align: center;
  color: #a61e30;
  font-weight: 700;
}
.noscript-msg {
  padding-top: 40px;
  padding-bottom: 40px;
  text-align: center;
  font-weight: 700;
}

/* ==========================================================================
   6. 반응형 — 360 / 768 / 1024
   ========================================================================== */

/* 태블릿 이상 (≥768px): 표 머리글 + 2칼럼 행(프로그램명 | 카드) */
@media (min-width: 768px) {
  .inner { padding-left: 24px; padding-right: 24px; }

  .panel-body { padding: 32px 28px 40px; }

  .tablist { grid-template-columns: repeat(4, 1fr); }

  .table-head,
  .program-row {
    display: grid;
    grid-template-columns: 184px 1fr;
    gap: 6px;
  }
  .program-row { align-items: center; padding: 14px 2px; }
  .program-name {
    margin-bottom: 0;
    padding: 0 12px;
    text-align: center;
    align-self: center;
  }
  .program-table { padding: 16px; }
}

/* 데스크톱 (≥1024px) */
@media (min-width: 1024px) {
  .hero .inner { padding-top: 72px; padding-bottom: 72px; }

  .table-head,
  .program-row {
    grid-template-columns: 220px 1fr;
  }
  .program-name { font-size: 20px; }
  .memo-card { padding: 24px 28px 20px; }
  .panel { padding: 40px 0 72px; }
  .panel-body { padding: 40px 40px 48px; }
}