/* ==========================================================================
   v17 — 마지막 페이지(패널 3) "합격 소식" 벽
   면접을 준비한 분들이 보내 온 카카오톡 대화 캡처가 배경에서 천천히 흐르고,
   가운데에 문구와 지원 버튼이 고정된다. 참고 영상과 같은 구성.

   · 카드는 images/kakao/kakao01~09.webp — 모두 540×900(3:5)으로 규격을 맞춰 두었다.
   · 흐름은 CSS 애니메이션만 쓴다(translate3d 한 축) — js 없이도 돌고, 합성 레이어에서 처리된다.
   · 흰 배경 규칙(css/lp-korea-map-v13.css)은 패널 1·2 에만 걸려 있어 이 패널은 어두운 우주 톤을 그대로 쓴다.
   ========================================================================== */

body.theme-sian3-lp .s3-panel.s3-proof {
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #f5f6fa;
  overflow: hidden;
}

/* 배경 — 히어로보다 조금 더 가라앉은 검정에 붉은 기운을 옅게 */
body.theme-sian3-lp .s3-proof__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 78% 12%, rgba(150, 26, 38, 0.28) 0%, rgba(12, 12, 18, 0) 58%),
    radial-gradient(90% 70% at 12% 88%, rgba(96, 22, 32, 0.22) 0%, rgba(12, 12, 18, 0) 62%),
    linear-gradient(180deg, #0a0a10 0%, #0d0d15 52%, #08080e 100%);
  pointer-events: none;
}

/* 카드 벽 — 열마다 방향과 속도를 달리해 같은 리듬으로 보이지 않게 한다 */
body.theme-sian3-lp .s3-proof__wall {
  position: absolute;
  inset: -6% -2%;
  z-index: 1;
  display: flex;
  justify-content: center;
  /* 열을 벽 높이에 맞춰 늘리지 않는다. 늘어나면 열 높이가 곧 화면 높이가 되어
     아래 @keyframes 의 이동량(높이의 1/3)이 '카드 한 벌'이 아니라 '화면의 1/3'이 되고,
     카드 아래쪽에 빈칸이 생긴다 */
  align-items: flex-start;
  gap: clamp(12px, 1.4vw, 26px);
  pointer-events: none;
  /* 위아래 끝을 부드럽게 지워 화면 경계에서 잘린 느낌을 없앤다 */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

body.theme-sian3-lp .s3-proof__col {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 26px);
  /* 마지막 카드 뒤에도 gap 한 칸을 둬야 '카드 한 벌'의 높이가 정확히 열 높이의 1/3 이 된다.
     이게 없으면 한 바퀴 돌 때마다 gap 만큼 어긋나 이음매가 보인다 */
  padding-bottom: clamp(12px, 1.4vw, 26px);
  width: clamp(150px, 15vw, 236px);
  flex: 0 0 auto;
  animation: s3ProofDrift 46s linear infinite;
  will-change: transform;
}
/* 같은 카드 묶음을 세 벌 이어 붙여 두고 한 벌(=높이의 1/3)만큼만 움직인다 → 이어짐이 끊기지 않는다.
   세 벌인 이유: 한 벌이 흘러간 뒤에도 남은 두 벌이 화면을 덮어야 아래쪽에 빈칸이 안 생긴다.
   두 벌이면 세로로 긴 화면(예: 태블릿 세로 1024×1366)에서 카드 아래가 비었다 */
@keyframes s3ProofDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -33.3333%, 0); }
}

/* 속도·방향에 더해 시작 위치(음수 delay)도 어긋내 같은 카드가 옆줄과 나란히 놓이지 않게 한다 */
body.theme-sian3-lp .s3-proof__col:nth-child(1) { animation-delay: -7s; }
body.theme-sian3-lp .s3-proof__col:nth-child(2) { animation-duration: 58s; animation-direction: reverse; animation-delay: -23s; }
body.theme-sian3-lp .s3-proof__col:nth-child(3) { animation-duration: 52s; animation-delay: -11s; }
body.theme-sian3-lp .s3-proof__col:nth-child(4) { animation-duration: 64s; animation-direction: reverse; animation-delay: -34s; }
body.theme-sian3-lp .s3-proof__col:nth-child(5) { animation-duration: 50s; animation-delay: -19s; }
body.theme-sian3-lp .s3-proof__col:nth-child(6) { animation-duration: 61s; animation-direction: reverse; animation-delay: -3s; }
body.theme-sian3-lp .s3-proof__col:nth-child(7) { animation-duration: 48s; animation-delay: -29s; }
body.theme-sian3-lp .s3-proof__col:nth-child(8) { animation-duration: 56s; animation-direction: reverse; animation-delay: -14s; }
body.theme-sian3-lp .s3-proof__col:nth-child(9) { animation-duration: 54s; animation-delay: -41s; }

body.theme-sian3-lp .s3-proof__card {
  display: block;
  width: 100%;
  /* 세로 flex 안에서 기본 flex-shrink:1 이면 카드가 눌려 3:5 가 깨진다 */
  flex: 0 0 auto;
  aspect-ratio: 3 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: #b2c7d9;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  transform: rotate(var(--tilt, 0deg));
}

body.theme-sian3-lp .s3-proof__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 가운데 문구가 주인공이므로 카드는 한 톤 가라앉힌다 */
  opacity: 0.62;
  filter: saturate(0.92) contrast(0.98);
}

/* 가운데 문구 — 카드 위에 어두운 원형 그늘을 깔아 글이 항상 또렷하게 */
body.theme-sian3-lp .s3-proof__stack {
  position: relative;
  z-index: 2;
  width: min(760px, 92%);
  padding: clamp(26px, 4vh, 48px) clamp(18px, 3vw, 40px);
}
body.theme-sian3-lp .s3-proof__stack::before {
  content: '';
  position: absolute;
  inset: -18% -22%;
  z-index: -1;
  background: radial-gradient(58% 52% at 50% 50%, rgba(8, 8, 12, 0.92) 0%, rgba(8, 8, 12, 0.72) 46%, rgba(8, 8, 12, 0) 78%);
  pointer-events: none;
}

body.theme-sian3-lp .s3-proof__title {
  margin: 10px 0 0;
  word-break: keep-all; /* 한글 문구가 단어 중간에서 줄바꿈되지 않게 */
  font-size: clamp(1.9rem, 4.6vw, 3.5rem);
  line-height: 1.24;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-wrap: balance;
}
body.theme-sian3-lp .s3-proof__title em {
  font-style: normal;
  color: var(--s3-red, #e0242c);
}
body.theme-sian3-lp .s3-proof__desc {
  margin: clamp(12px, 1.8vh, 20px) 0 0;
  font-size: clamp(0.92rem, 1.5vw, 1.06rem);
  line-height: 1.7;
  color: rgba(245, 246, 250, 0.76);
}
body.theme-sian3-lp .s3-proof__actions {
  margin-top: clamp(20px, 3vh, 34px);
  display: flex;
  justify-content: center;
}

/* 등장 — 다른 패널과 같은 리듬(css/sian3-motion.css 의 keyframes 재사용).
   문구는 기본이 '보임'이다. is-inview 는 애니메이션만 붙인다 — 관찰이 늦거나 걸리지 않아도 글이 사라지지 않게 */
body.theme-sian3-lp .s3-panel.s3-proof.is-inview .s3-kicker { animation: s3-rise-in 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.04s backwards; }
body.theme-sian3-lp .s3-panel.s3-proof.is-inview .s3-proof__title { animation: s3-rise-in 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.13s backwards; }
body.theme-sian3-lp .s3-panel.s3-proof.is-inview .s3-proof__desc { animation: s3-rise-in 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.22s backwards; }
body.theme-sian3-lp .s3-panel.s3-proof.is-inview .s3-proof__actions { animation: s3-fade-soft 0.7s ease 0.34s backwards; }

/* 작은 제목 — 다른 패널은 흰 배경이라 붉은 글씨지만 여기서는 어두운 배경이라 밝은 회색으로 */
body.theme-sian3-lp .s3-proof .s3-kicker {
  color: rgba(245, 246, 250, 0.66);
  letter-spacing: 0.2em;
}
body.theme-sian3-lp .s3-proof__title,
body.theme-sian3-lp .s3-proof__desc {
  text-shadow: 0 2px 18px rgba(6, 6, 10, 0.75);
}

/* 열 개수 — 화면 폭에 따라 늘리고 줄인다. 마크업에는 9열이 있고 좁아질수록 뒤에서부터 감춘다 */
@media (min-width: 1600px) and (max-width: 2199px) {
  body.theme-sian3-lp .s3-proof__col:nth-child(n + 8) { display: none; }
}
@media (min-width: 1181px) and (max-width: 1599px) {
  body.theme-sian3-lp .s3-proof__col:nth-child(n + 6) { display: none; }
}
/* 태블릿 — 열 셋 */
@media (min-width: 721px) and (max-width: 1180px) {
  body.theme-sian3-lp .s3-proof__col:nth-child(n + 4) { display: none; }
}
/* 폰 — 열 둘, 카드는 크게 두되 한 톤 더 가라앉혀 문구가 먼저 읽히게 */
@media (max-width: 720px) {
  body.theme-sian3-lp .s3-proof__col:nth-child(n + 3) { display: none; }
  body.theme-sian3-lp .s3-proof__col { width: clamp(140px, 38vw, 220px); }
  body.theme-sian3-lp .s3-proof__card img { opacity: 0.42; }
  body.theme-sian3-lp .s3-proof__stack::before { inset: -24% -30%; }
}

@media (prefers-reduced-motion: reduce) {
  body.theme-sian3-lp .s3-proof__col { animation: none; }
  body.theme-sian3-lp .s3-panel.s3-proof.is-inview .s3-proof__stack > * { animation: none; }
}