/* ============================================================
   커넥트 메시지 — 어두운 히어로 지면
   히어로와 스탯을 광고 페이지와 같은 어둠(#0C0908)으로 두고,
   그 다음 섹션에서 스크롤에 따라 밝은 지면으로 푼다.
   인물은 3D 캐러셀을 시도했다가 나열식 티커로 되돌렸다(2026-09-09).
   ============================================================ */

/* ---------- 어두운 지면 ---------- */
body.page-msg .adhero {
  background: #0C0908;
  padding-bottom: 0;
  overflow: hidden;   /* 링이 좌우로 넘쳐도 가로 스크롤이 생기지 않게 */
}
body.page-msg .adhero__eyebrow { color: var(--accent-400, #FF7A3D); }
body.page-msg .adhero__title {
  color: #F7F7EF;                            /* 순백 금지 — 리멤버 오프화이트 */
  font-size: clamp(28px, 3.8vw, 56px);       /* 광고 히어로(.pscroll__title)와 같은 규칙 */
  line-height: 1.26;
  letter-spacing: -1.2px;
}
body.page-msg .adhero__sub { color: #A7A099; }
body.page-msg .adhero__btn--primary {
  background: #F7F7EF; color: #0A0A0A;   /* 어두운 지면에선 검정 버튼이 사라진다 */
}

/* 스탯까지 한 덩어리로 어둡게 — 히어로 바로 아래에서 밝아지면 그 선이
   캐러셀 카드 하단을 잘라 먹는다. 경계는 스탯 아래로 내린다. */
body.page-msg .adstats {
  position: relative;
  background: #0C0908;
  padding: 64px 0;
}
body.page-msg .adstats__cell { border-color: rgba(255, 255, 255, .14); }
/* 좌우 여백은 데스크탑에만 — 모바일은 3열을 한 박스에 담아 폭이 빠듯하다 */
@media (min-width: 761px) {
  body.page-msg .adstats__cell { padding: 18px 22px 20px; }
}
body.page-msg .adstats__label { color: #F7F7EF; }
body.page-msg .adstats__desc { color: #A7A099; }
/* 히어로의 인물 사진이 주인공이다 — 숫자가 그보다 크면 위계가 뒤집힌다.
   모바일은 3열을 한 박스에 담는 별도 규칙이 있어 데스크탑에만 건다. */
@media (min-width: 761px) {
  body.page-msg .adstats__num { font-size: 56px; letter-spacing: -1.5px; line-height: 1.4; }
  body.page-msg .adstats__num small { font-size: 32px; letter-spacing: -.7px; }
  body.page-msg .adstats__label { margin-top: 2px; font-size: 19px; }
  body.page-msg .adstats__desc { font-size: 15px; }
}

/* 다음 섹션이 히어로와 같은 어둠으로 올라오다가, 경계가 화면 절반을 지나면
   밝은 지면으로 풀린다. 광고 히어로와 같은 방식 — 고정 그라데이션은 띠가 보인다. */
body.page-msg .adsec--handoff {
  --lit: 0;
  --lit-text: clamp(0, calc((var(--lit) - 0.46) * 8.3), 1);
  position: relative;
  background: color-mix(in srgb, #0C0908, var(--surface) calc(var(--lit) * 100%));
}
/* 경계가 곧은 가로선이라 색만 바꾸면 선이 쓸고 지나간다 — 위에 어둠을 한 겹 깔아 지운다 */
body.page-msg .adsec--handoff::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc((1 - var(--lit)) * min(340px, 32vh));
  pointer-events: none;
  background: linear-gradient(to bottom, #0C0908 0%, rgba(12, 9, 8, .78) 34%, rgba(12, 9, 8, 0) 100%);
}
body.page-msg .adsec--handoff > * { position: relative; z-index: 1; }
/* 글자는 배경보다 늦게 넘긴다 — 같은 속도면 중간에 대비가 사라진다 */
body.page-msg .adsec--handoff .adsec__title,
body.page-msg .adsec--handoff strong {
  color: color-mix(in srgb, #F7F7EF, #0A0A0A calc(var(--lit-text) * 100%));
}
body.page-msg .adsec--handoff .adsec__sub,
body.page-msg .adsec--handoff p:not(.adsec__eyebrow),
body.page-msg .adsec--handoff li {
  color: color-mix(in srgb, #A7A099, var(--text-sub) calc(var(--lit-text) * 100%));
}

/* 어두운 구간 위의 헤더 — 광고 페이지와 같은 처리 */
body.page-msg .gnb {
  background: rgba(24, 20, 17, .58);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .10);
  transition: background-color .3s, border-color .3s, box-shadow .3s;
}
body.page-msg .gnb__brand-name,
body.page-msg .gnb__link.is-active { color: #F7F7EF; }
body.page-msg .gnb__link { color: #A7A099; }
body.page-msg .gnb__logo { filter: invert(1) brightness(1.6); }
body.page-msg .gnb__burger span { background: #F7F7EF; }

body.page-msg .gnb.is-past-dark {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
body.page-msg .gnb.is-past-dark .gnb__brand-name,
body.page-msg .gnb.is-past-dark .gnb__link.is-active { color: #0A0A0A; }
body.page-msg .gnb.is-past-dark .gnb__link { color: var(--text-nav); }
body.page-msg .gnb.is-past-dark .gnb__logo { filter: none; }
body.page-msg .gnb.is-past-dark .gnb__burger span { background: #0A0A0A; }

/* ---------- 어두운 지면 위의 인물 티커 ---------- */
/* 데스크탑 규칙(body.page-msg .htick)의 큰 음수 마진이 좁은 화면까지 따라와
   부모 padding(20px)을 넘겨 가로 스크롤을 만들었다. 좁은 화면에선 padding 만큼만 뺀다. */
@media (max-width: 760px) {
  body.page-msg .htick { margin-left: -20px; margin-right: -20px; }
  .htick__track img { height: 320px; }

  /* 어두운 지면 위에 흰 박스가 뜬다 — 광고 히어로의 숫자 박스와 같은 값으로 */
  body.page-msg .adstats__grid {
    background: rgba(255, 255, 255, .045);
    border-color: rgba(255, 255, 255, .085);
    padding: 22px 20px 24px;  /* 광고는 히어로 안 보조라 얇았다 — 여기는 독립 섹션이다 */
    border-radius: 8px;       /* 광고 히어로 숫자 박스와 같은 값 */
    /* 1fr 3등분은 라벨 길이가 제각각이라 열 사이 간격이 들쭉날쭉해 보인다.
       콘텐츠 폭만큼만 쓰게 두고 남는 자리를 균등하게 나눈다. */
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
  }
  body.page-msg .adstats__num { font-size: clamp(27px, 7.6vw, 33px); letter-spacing: -.2px; }
  /* 가운데 정렬이면 라벨과 숫자의 폭이 달라 열마다 왼쪽 시작점이 어긋난다 */
  body.page-msg .adstats__cell { text-align: left; padding: 0; }
  body.page-msg .adstats__num small { font-size: clamp(15px, 4.2vw, 19px); }
  body.page-msg .adstats__label { font-size: clamp(13px, 3.7vw, 14px); }
}
.htick { mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.htick__track img { width: auto; border-radius: 0; }
@media (min-width: 761px) { .htick__track img { height: 400px; } }

/* ---------- 반응형 ---------- */
@media (max-width: 760px) {
  body.page-msg .adhero::after { height: 64px; margin-top: -64px; }
}