/* 크로스브라우저 안전망 — 섹션 파일(.dc.html)은 건드리지 않는다.
   재export해도 이 파일과 index.html의 로더만 유지되면 계속 동작한다.

   문제: 섹션들이 .rv{opacity:0} 로 "안 보임"을 기본값으로 두고
        JS가 .is-in 을 붙여야 비로소 보인다.
        → IntersectionObserver가 한 번이라도 미발동하면 그 영역은 영원히 백지.
          (Edge 효율성 모드, 백그라운드 탭, 스크립트 지연·차단, 구형 엔진 등)

   해결: 기본을 "보임"으로 되돌리고, JS가 살아있음이 확인될 때만 숨긴다. */

/* ① JS가 없거나 죽었으면(html.rvjs 없음) 전부 보인다 */
html:not(.rvjs) .rv {
  opacity: 1 !important;
  transform: none !important;
}

/* ② OS "애니메이션 효과 끄기"(prefers-reduced-motion)면 애니 없이 즉시 보인다.
      기존 섹션 CSS는 transition만 줄이고 opacity:0 은 그대로여서 여전히 JS에 의존했다. */
@media (prefers-reduced-motion: reduce) {
  .rv {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* 무한 루프 장식(마퀴·펄스)은 정지 */
  .telp, [class*="pulse"], [style*="infinite"] {
    animation: none !important;
  }
}

/* ③ 사파리 대비 — background-clip:text 는 -webkit- 프리픽스가 있어야 글자에 그라디언트가 먹는다.
      (누락 시 글자가 통째로 투명해져 "안 보이는" 증상이 난다) */
[style*="background-clip"],
[style*="background-clip:text"] {
  -webkit-background-clip: text;
}

/* ④ 가로 스크롤 차단 — 모바일에서 마퀴 트랙이 삐져나와 생기는 좌우 밀림 방지 */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ⑥ 데스크톱에서도 모바일 화면처럼 (신비2 방식)
      - 콘텐츠를 480px 컬럼으로 묶고 좌우는 다크 배경
      - 마퀴·롤링이 와이드 화면에서 길게 늘어져 보이는 문제도 같이 해결된다
        (트랙 폭이 컬럼에 갇히므로 모바일과 동일한 노출량) */
@media (min-width: 641px) {
  html, body { background: #100c08 !important; }

  #lp-root, #dc-root {
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 0 80px rgba(0, 0, 0, .6);
    overflow-x: hidden;   /* 컬럼 밖으로 마퀴가 새지 않게 */
  }

  /* 하단 고정 상담바도 같은 컬럼 폭에 정렬 */
  #oldbar { max-width: 480px; margin: 0 auto; }
}

/* ⑤ 마퀴/롤링 트랙은 GPU 합성으로 올려 저사양·Edge 절전모드에서도 덜 끊기게 */
[class*="roll"], [class*="marquee"], [class*="track"] {
  will-change: transform;
  backface-visibility: hidden;
}