/* ================================================================
   청춘배낭 소개 페이지 v2 (about2)
   기존 youth-about.css 와 완전히 분리된 파일이다. 두 판을 나란히 비교하기 위해
   클래스 접두사를 .ab2- 로 두고, .ccb-about2 안에서만 동작하게 감쌌다.
   색·폰트 토큰은 youth-tokens.css, 좌우 크림 블리드는 youth-main.css 의 .ccb-main 을 쓴다.
   분기점(1040 / 800 / 620)은 시안과 같게 맞췄다.
   ================================================================ */

/* 아래 여백 없음(원래 40px).
   CTA 를 푸터에 딱 붙이면, 푸터가 이미 갖고 있는 찢어진 종이 경계가
   노을 사진과 네이비 푸터 사이의 이음매가 된다 — 사진이 종이처럼 찢겨나가고
   그 아래에서 네이비가 드러나는 모양이다. 크림색 빈 띠를 두는 것보다
   시안의 언어(찢어진 종이)에 맞고, CTA 바닥이 이미 짙어지는 그라데이션이라
   푸터 네이비로 자연스럽게 이어진다. */
.ccb-about2 {
  padding: 0;
}

/* ---- 공통 ---- */

.ccb-about2 .ab2-eyebrow {
  margin: 0 0 14px;
  color: #0a418d;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

.ccb-about2 h1,
.ccb-about2 h2 {
  margin: 0;
  color: var(--navy);
  font-weight: 950;
  line-height: 1.35;
  letter-spacing: -2.4px;
  word-break: keep-all;
  text-shadow: 0.35px 0 currentColor;
}

.ccb-about2 h1 { font-size: clamp(32px, 3.9vw, 50px); }
.ccb-about2 h2 { font-size: clamp(27px, 3.1vw, 39px); }

.ccb-about2 h3 {
  margin: 0;
  color: var(--navy);
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.9px;
}

.ccb-about2 p {
  color: #0a418d;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.85;
  letter-spacing: -0.5px;
  word-break: keep-all;
}

/* 마커 강조. 이미지가 글자 뒤로 깔린다 — 시안 히어로와 같은 방식. */
.ccb-about2 .ab2-mark {
  position: relative;
  display: inline-block;
}

/* 마커 이미지(303x66)는 가로로만 늘린다.
   height:auto 로 두면 문장이 길수록 세로도 같이 커져서, 한 줄을 통째로 강조할 때
   윗줄까지 노란 띠가 덮어버린다. 그래서 높이를 글자 크기에 묶어 고정한다. */
.ccb-about2 .ab2-mark img {
  position: absolute;
  z-index: -1;
  left: -14%;
  bottom: -0.18em;
  width: 128%;
  height: 1.4em;
}

.ccb-about2 .ab2-deco {
  position: absolute;
  display: block;
  pointer-events: none;
}

/* 사진 + 찢어진 프레임 짝.
   프레임과 사진의 종횡비가 다르면 프레임이 사진을 가로지르는 흰 띠처럼 보인다.
   그래서 비율은 항상 프레임 쪽에 맞춘다. */
.ccb-about2 .ab2-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 510 / 320;
}

.ccb-about2 .ab2-photo--wide {
  aspect-ratio: 1957 / 804;
}

.ccb-about2 .ab2-photo__img,
.ccb-about2 .ab2-photo__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 사진은 전부 찢어진 종이 모양으로 미리 마스킹된 PNG 다(가장자리가 투명).
   배경색이나 모서리 반경을 주면 마스크 바깥에 네모가 드러나므로 아무것도 깔지 않는다. */
.ccb-about2 .ab2-photo__img {
  object-fit: contain;
}

.ccb-about2 .ab2-photo__frame { z-index: 2; }

/* ---- 01. 소개 히어로 ---- */

.ccb-about2 .ab2-hero {
  padding: 74px 48px 70px;
  text-align: center;
}

.ccb-about2 .ab2-hero__copy {
  max-width: 760px;
  margin: 0 auto;
}

.ccb-about2 .ab2-lead {
  margin: 26px 0 0;
  font-size: 18px;
  line-height: 2;
}

/* 콜라주 대신 큰 사진 한 장. 프레임 안쪽 여백만큼(약 4%) 사진이 잘려 보이지 않도록
   사진과 프레임을 같은 상자에 겹쳐 두고, 메모는 그 위에 얹는다. */
.ccb-about2 .ab2-hero__stage {
  position: relative;
  max-width: 1080px;
  margin: 52px auto 0;
}

/* 프레임에 z-index:2 가 걸려 있어서, 메모에 값을 주지 않으면
   찢어진 종이 테두리가 메모 위를 가로질러 지나간다. */
.ccb-about2 .ab2-memo {
  position: absolute;
  z-index: 4;
  right: -14px;
  bottom: -46px;
  width: 268px;
  transform: rotate(2.2deg);
}

.ccb-about2 .ab2-memo img {
  display: block;
  width: 100%;
  height: auto;
}

.ccb-about2 .ab2-memo p {
  position: absolute;
  inset: 26% 13% 14%;
  margin: 0;
  color: #23272e;
  font-family: var(--handwriting-font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-align: center;
}

.ccb-about2 .ab2-deco--star { right: -20px; top: -30px; width: 48px; }
.ccb-about2 .ab2-deco--blue { left: -18px; bottom: -6px; width: 44px; }

/* ---- 02. 청춘배낭이 시작된 이유 ---- */

.ccb-about2 .ab2-why {
  margin-top: 58px;
  padding: 72px 48px 76px;
  background: var(--program-cream);
  border-top: 1px solid var(--line);
}

.ccb-about2 .ab2-why__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 52px;
}

.ccb-about2 .ab2-why__underline {
  display: block;
  width: 268px;
  height: auto;
  margin: 16px 0 6px;
}

.ccb-about2 .ab2-why__copy p {
  margin: 22px 0 0;
}

.ccb-about2 .ab2-why__art {
  position: relative;
  min-width: 0;
}

.ccb-about2 .ab2-why__art .ab2-deco--lines {
  right: -22px;
  bottom: -20px;
  width: 60px;
  z-index: 3;
}

/* ---- 03. 우리가 만드는 경험 ---- */

.ccb-about2 .ab2-make {
  padding: 74px 48px 78px;
}

.ccb-about2 .ab2-make__head {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.ccb-about2 .ab2-make__lead {
  margin: 22px 0 0;
}

/* 가로 흐름형 4단계. 카드 대신 열 사이를 점선이 잇는다. */
.ccb-about2 .ab2-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

.ccb-about2 .ab2-flow__step {
  position: relative;
  padding: 0 26px;
}

/* 단계를 잇는 점선. 첫 칸 왼쪽에는 붙이지 않는다. */
.ccb-about2 .ab2-flow__step + .ab2-flow__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 8px;
  border-left: 2px dotted rgba(7, 59, 134, 0.24);
}

.ccb-about2 .ab2-flow__num {
  display: block;
  margin-bottom: 12px;
  color: var(--yellow);
  font-family: "Comic Relief", var(--handwriting-font);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
}

.ccb-about2 .ab2-flow__step h3 {
  margin-bottom: 10px;
  font-size: 22px;
}

.ccb-about2 .ab2-flow__step p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
}

/* ---- 04. 중요하게 생각하는 것 ---- */

.ccb-about2 .ab2-keep {
  padding: 70px 48px 78px;
  background: var(--program-cream);
  border-top: 1px solid var(--line);
}

.ccb-about2 .ab2-keep__head {
  text-align: center;
}

.ccb-about2 .ab2-keep__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 50px 0 0;
  padding: 0;
  list-style: none;
}

.ccb-about2 .ab2-keep__card {
  padding: 34px 26px 30px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fffdf8;
  text-align: center;
}

.ccb-about2 .ab2-keep__icon {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 auto 18px;
  object-fit: contain;
}

.ccb-about2 .ab2-keep__card h3 {
  margin-bottom: 12px;
  font-size: 19px;
}

.ccb-about2 .ab2-keep__card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}

/* ---- 05. 지금 만들고 있는 프로그램 ---- */

.ccb-about2 .ab2-programs {
  position: relative;
  padding: 72px 48px 78px;
}

.ccb-about2 .ab2-programs__head {
  position: relative;
}

.ccb-about2 .ab2-programs__plane {
  position: absolute;
  right: 0;
  top: 4px;
  width: 200px;
  height: auto;
  opacity: .9;
}

.ccb-about2 .ab2-programs__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.ccb-about2 .ab2-program h3 {
  margin: 24px 0 10px;
  font-size: 24px;
}

.ccb-about2 .ab2-program h3 a {
  color: inherit;
}

.ccb-about2 .ab2-program h3 a:hover,
.ccb-about2 .ab2-program h3 a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.ccb-about2 .ab2-program p {
  margin: 0;
  font-size: 16px;
}

/* 준비 중인 프로그램 — 이름만 흐린 톤으로. */
.ccb-about2 .ab2-soon {
  margin: 52px 0 0;
  padding: 26px 0 0;
  border-top: 1px dashed rgba(7, 59, 134, 0.2);
  text-align: center;
}

.ccb-about2 .ab2-soon__label {
  margin: 0 0 14px;
  color: rgba(10, 65, 141, 0.55);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
}

.ccb-about2 .ab2-soon__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ccb-about2 .ab2-soon__list li {
  padding: 8px 18px;
  border: 1px solid rgba(7, 59, 134, 0.16);
  border-radius: 999px;
  color: rgba(10, 65, 141, 0.55);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

/* ---- 06. 함께 만드는 사람들 ---- */

.ccb-about2 .ab2-together {
  padding: 70px 48px 76px;
  background: var(--program-cream);
  border-top: 1px solid var(--line);
  text-align: center;
}

.ccb-about2 .ab2-together__squiggle {
  display: block;
  width: 126px;
  height: auto;
  margin: 16px auto 0;
}

.ccb-about2 .ab2-together p {
  margin: 20px 0 0;
}

/* 파트너 로고 한 줄. 로고가 하나뿐이라 가운데 정렬로 두고, 늘어나면 그대로 옆으로 붙는다. */
.ccb-about2 .ab2-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 40px;
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
}

.ccb-about2 .ab2-partners__item img {
  display: block;
  width: auto;
  max-width: 200px;
  height: 62px;
  object-fit: contain;
}

/* ---- 07. 마지막 CTA (사진 + 로열블루 오버레이) ---- */

.ccb-about2 .ab2-cta {
  position: relative;
  z-index: 0;
  padding: 118px 48px 124px;
  background-color: #073477; /* 사진이 늦게 뜨거나 실패해도 글씨가 읽히도록 */
  text-align: center;
}

/* 위쪽 크림 섹션과의 경계. 푸터가 쓰는 찢어진 종이 띠와 같은 처리다
   (위가 크림, 아래가 네이비인 상황이 똑같다). */
.ccb-about2 .ab2-cta::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  top: -10px;
  width: 100%;
  height: 20px;
  background-image: url("../img/youth/section-05-r6/17R-torn-footer-repeat-b.png");
  background-repeat: repeat-x;
  background-position: center;
  background-size: 1200px 20px;
  pointer-events: none;
}

/* 노을 사진을 로열블루로 물들인다.
   불투명한 색을 그냥 덮으면(alpha) 노을이 통째로 죽어 파란 사각형만 남는다.
   그래서 사진은 blue 와 multiply 로 섞어 듀오톤을 만들고(밝은 해는 밝게 남는다),
   글씨 대비는 그 위에 얹은 아래로 갈수록 짙어지는 그라데이션이 담당한다.
   레이어 순서: [그라데이션] / [사진 × background-color] */
.ccb-about2 .ab2-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: #0a4a9e;
  background-image:
    linear-gradient(180deg, rgba(22, 96, 182, 0.22) 0%, rgba(16, 78, 158, 0.34) 38%, rgba(9, 54, 120, 0.60) 100%),
    url("../img/youth/about2/about2-cta-bg.jpg");
  background-size: auto, cover;
  background-position: center, center 56%;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, normal;
}

.ccb-about2 .ab2-cta__star {
  display: block;
  width: 34px;
  height: auto;
  margin: 0 auto 20px;
}

/* 오버레이를 옅게(0.22~0.60) 가져가 노을이 그대로 보이는 만큼,
   흰 글씨를 받치는 일은 그림자가 대신한다. 밝은 하늘 위에 글씨가 얹히는 구간이 있어
   이 값을 더 낮추면 야외에서 읽기 어려워진다. */
.ccb-about2 .ab2-cta h2 {
  color: #fffdf8;
  text-shadow: 0 2px 18px rgba(0, 20, 50, 0.55), 0 1px 3px rgba(0, 20, 50, 0.35);
}

.ccb-about2 .ab2-cta p {
  margin: 20px 0 0;
  color: #fffdf8;
  text-shadow: 0 1px 14px rgba(0, 20, 50, 0.5), 0 1px 3px rgba(0, 20, 50, 0.3);
}

/* 손그림 장식 두 점. 사진이 이미 시선을 끌기 때문에 최소한만 둔다. */
.ccb-about2 .ab2-cta__deco {
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: .85;
}

.ccb-about2 .ab2-cta__deco--a { left: 8%; top: 22%; width: 26px; }
.ccb-about2 .ab2-cta__deco--b { right: 9%; bottom: 26%; width: 30px; }

/* 모바일 전용 줄바꿈. PC 에서는 없는 셈 쳐야 하므로 기본은 죽여 둔다. */
.ccb-about2 .ab2-br-mo { display: none; }

.ccb-about2 .ab2-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  margin-top: 34px;
  padding: 0 34px;
  border-radius: 999px;
  background: var(--yellow);
  color: #2a1c00;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.5px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.ccb-about2 .ab2-cta__btn:hover,
.ccb-about2 .ab2-cta__btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
}

/* ================================================================
   반응형
   ================================================================ */

@media (max-width: 1040px) {
  .ccb-about2 .ab2-hero,
  .ccb-about2 .ab2-why,
  .ccb-about2 .ab2-make,
  .ccb-about2 .ab2-keep,
  .ccb-about2 .ab2-programs,
  .ccb-about2 .ab2-together,
  .ccb-about2 .ab2-cta {
    padding-inline: 32px;
  }

  .ccb-about2 .ab2-why__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .ccb-about2 .ab2-why__art { order: -1; }
  .ccb-about2 .ab2-why__art .ab2-deco--lines { right: 0; }

  /* 4단계는 2열로 접는다. 세로 점선은 열이 접히면 뜻이 사라지므로 끈다. */
  .ccb-about2 .ab2-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 0;
  }

  .ccb-about2 .ab2-flow__step:nth-child(odd)::before { display: none; }

  .ccb-about2 .ab2-keep__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ccb-about2 .ab2-programs__plane {
    width: 150px;
    opacity: .7;
  }

  .ccb-about2 .ab2-memo {
    right: 0;
    bottom: -38px;
    width: 224px;
  }

  .ccb-about2 .ab2-memo p { font-size: 15px; }
  .ccb-about2 .ab2-deco--star { right: 2px; top: -22px; }
  .ccb-about2 .ab2-deco--blue { left: 0; }
}

@media (max-width: 800px) {
  .ccb-about2 .ab2-programs__list {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .ccb-about2 .ab2-programs__plane { display: none; }
}

@media (max-width: 620px) {
  .ccb-about2 .ab2-hero {
    padding: 46px 22px 52px;
  }

  .ccb-about2 .ab2-why,
  .ccb-about2 .ab2-make,
  .ccb-about2 .ab2-keep,
  .ccb-about2 .ab2-programs,
  .ccb-about2 .ab2-together,
  .ccb-about2 .ab2-cta {
    padding-inline: 22px;
  }

  .ccb-about2 h1 { letter-spacing: -1.8px; }
  .ccb-about2 h2 { letter-spacing: -1.6px; }
  .ccb-about2 .ab2-lead { font-size: 16px; }

  /* 히어로 사진은 마스킹된 파노라마(2.43:1)라 비율을 바꿀 수 없다 —
     상자만 세우면 사진이 가운데 띠로 남고 위아래가 텅 빈다.
     대신 좌우 여백만큼 밖으로 빼서 화면 끝까지 채운다. */
  .ccb-about2 .ab2-hero__stage {
    margin: 40px -22px 0;
  }

  /* 장식별은 사진이 화면 끝까지 가면 놓을 자리가 없다. */
  .ccb-about2 .ab2-hero__stage .ab2-deco { display: none; }

  /* 좁은 화면에서 메모가 사진 위에 겹치면 둘 다 읽기 어렵다. 사진 아래로 내린다. */
  .ccb-about2 .ab2-memo {
    position: static;
    width: 250px;
    margin: 26px auto 0;
    transform: rotate(-1.4deg);
  }

  /* 본문 문단의 강제 줄바꿈(<br>)은 PC 폭에 맞춰 넣은 것이다.
     좁은 화면에서는 그 줄이 또 한 번 접혀 "…보지 / 않습니다." 처럼
     낱말 한둘이 떨어져 나온다. 모바일에서는 <br> 을 죽이고 자연스럽게 흐르게 둔다.
     (제목의 <br> 은 의도한 줄나눔이라 그대로 둔다.) */
  .ccb-about2 .ab2-why__copy p br,
  .ccb-about2 .ab2-make__lead br,
  .ccb-about2 .ab2-together p br {
    display: none;
  }

  /* 4단계는 세로로 쌓인다. PC 에서 열 사이를 갈라주던 세로 점선이 사라지면
     네 덩이가 그냥 이어진 글로 보인다. 같은 점선을 가로로 눕혀 단계를 끊어주고,
     번호를 왼쪽으로 빼 각 단계의 시작점이 눈에 바로 들어오게 한다. */
  .ccb-about2 .ab2-flow {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .ccb-about2 .ab2-flow__step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    padding: 22px 0;
  }

  .ccb-about2 .ab2-flow__step + .ab2-flow__step {
    border-top: 2px dotted rgba(7, 59, 134, 0.24);
  }

  .ccb-about2 .ab2-flow__step + .ab2-flow__step::before { display: none; }

  .ccb-about2 .ab2-flow__num {
    grid-column: 1;
    grid-row: 1 / 3;
    margin: 0;
    font-size: 28px;
  }

  .ccb-about2 .ab2-flow__step h3 {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 6px;
  }

  .ccb-about2 .ab2-flow__step p {
    grid-column: 2;
    grid-row: 2;
  }

  .ccb-about2 .ab2-keep__list {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ccb-about2 .ab2-partners__item img { height: 52px; }

  .ccb-about2 .ab2-br-mo { display: inline; }

  /* 좁은 화면에서는 장식을 놓을 좌우 여백이 없다. 사진과 글씨만 남긴다.
     아래 여백을 크게 잡는 이유는 빈칸을 두려는 게 아니라,
     사진 아래쪽의 사람 실루엣이 버튼에 가리지 않고 드러날 자리를 만들기 위해서다. */
  .ccb-about2 .ab2-cta {
    padding-block: 76px 168px;
  }

  .ccb-about2 .ab2-cta__deco { display: none; }

  /* 가로 2.4:1 파노라마를 세로 화면에 cover 로 채우면 좌우 70% 가 잘려나가
     해도 사람도 화면 밖으로 밀린다. 모바일은 처음부터 세로(3:4)로 잡은 사진을 쓴다.
     오버레이는 PC 와 같은 값이라 톤이 어긋나지 않는다. */
  .ccb-about2 .ab2-cta::after {
    background-image:
      linear-gradient(180deg, rgba(22, 96, 182, 0.22) 0%, rgba(16, 78, 158, 0.34) 38%, rgba(9, 54, 120, 0.60) 100%),
      url("../img/youth/about2/about2-cta-bg-mo.jpg");
    /* 아래를 기준으로 붙인다. 폭이 넓어져(560~620px) 세로가 잘릴 때
       잘려나가는 쪽이 위쪽 하늘이 되고, 사람 실루엣은 항상 남는다. */
    background-position: center, center bottom;
  }

  .ccb-about2 .ab2-cta__btn {
    width: 100%;
    justify-content: center;
    padding-inline: 20px;
  }
}