:root {
    --sl-snap-offset: 0px;
}

/* 공통 */
.th_sl-stage {
    pointer-events: auto;
    position: relative;
    width: 100%;
}

.th_sl-inner {
    position: relative;
    height: 100%;
    /* will-change는 JS에서 애니메이션 중에만 올림 */
    will-change: auto;
    isolation: isolate;
    /* 필요시 유지 */
    box-sizing: content-box !important;
}

/* 레이어 순서: (도형: SVG g) < path < 라벨 */
.th_sl-inner svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 2;
    pointer-events: none;
}

.th_sl-label {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    /* 라벨 스타일 입력(여백/패딩/정렬/폭)과의 정합 강화 */
    display: inline-block;
    /* text-align, padding, width 사용 시 안정 */
    box-sizing: border-box;
    /* padding 포함 폭 계산 */
    white-space: pre-line;
    /* 줄바꿈 유지 (PHP inline과 동일 기본값) */
    line-height: 1.2;
    /* PHP inline과 동일 기본값 */
}

/* 내부 래퍼는 섹션 높이에 맞춤 */
.th_sl-stage>.th_sl-inner,
.th_sl-stage>.sl-inner {
    height: 100%;
}

.th_sl-stage::-webkit-scrollbar {
    height: 8px;
}

.th_sl-stage::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .25);
    border-radius: 4px;
}

/* vscroll 모드 */
.th_sl-stage[data-mode="vscroll"] {
    overflow: hidden !important;
}

.th_sl-pin {
    position: relative;
    height: var(--sl-scroll-h, 200vh);
    min-height: calc(var(--sl-h, 100vh) + 1px);
}

.th_sl-sticky {
    position: sticky;
    top: 0;
    height: var(--sl-h, 100vh);
    z-index: 1;
    contain: none !important;
    content-visibility: visible !important;
    overflow: visible !important;
    /* 클립 방지 */
}

/* lock 모드 */
.th_sl-stage[data-mode="lock"] {
    overflow: hidden !important;
    touch-action: none;
}

.th_sl-lock {
    position: relative;
    height: var(--sl-h, 100vh);
}

.th_sl-shape {
    display: none !important;
}

/* 이 섹션에서 여백 제거 (테마/엘리멘터가 패딩 넣는 경우) */
.th_sl-stage,
.th_sl-sticky {
    padding: 0 !important;
    border: 0 !important;
}

/* front.css */
/* ───────────────────────────────────────────────
   ScrollLine 안전 페인트 가드 (역방향 스크롤 페인트 스킵 방지)
   - 일부 테마/빌더가 content-visibility/contain을 전역 적용함
   - 수평 translate3d + 섹션스냅 조합에서 역방향 첫 프레임이 cull되는 현상 회피
──────────────────────────────────────────────── */
.th_sl-stage,
.sl-stage,
.th_sl-stage *,
.sl-stage * {
    content-visibility: visible !important;
    contain: none !important;
}

html.sl-snap-off,
body.sl-snap-off,
.th_sl-root.sl-snap-off,
.th_sl-stage.sl-snap-off {
    scroll-snap-type: none !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
    overscroll-behavior-x: contain !important;
}

/* 움직이는 타겟에서 backface/합성 안정화 */
.th_sl-inner,
.sl-inner {
    backface-visibility: hidden;
    transform-style: flat;
    /* 3D 누적 방지 */
    will-change: auto;
    /* 기본은 auto, JS에서 애니메이션 동안만 올림 */
}

/* SVG 호스트가 가끔 스킵되는 경우 */
.sl-svg-host,
.sl-svg-host svg,
.sl-svg-host path {
    contain: none !important;
    content-visibility: visible !important;
}

/* 일부 테마가 path에 트랜지션을 강제 -> 첫 프레임 숨김처럼 보임 */
.sl-svg-host path {
    transition: none !important;
}

/* ⬇️ 외부 SVG(host 안) 는 절대배치 금지: 초기 진입 시 레이아웃 점프/측정 지연 방지 */
.th_sl-inner .sl-svg-host svg {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
}

/* ➊ (보강) 활성 구간 동안 스냅/체이닝 차단 – html/body 뿐 아니라 root/stage에도 대응 */
html.sl-snap-off,
body.sl-snap-off,
.th_sl-root.sl-snap-off,
.th_sl-stage.sl-snap-off {
    scroll-snap-type: none !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
    overscroll-behavior-x: contain !important;
}

/* 이 섹션 자체도 스냅 포인트 아님 */
.th_sl-stage {
    scroll-snap-align: none !important;
}

/* ⬇️ overflow 모드에서는 반드시 네이티브 가로 스크롤을 확보 */
.th_sl-stage[data-mode="overflow"] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    /* ⬇️ 스킵/덜덜 방지: 수직 관성 흡수 + 스무스 스크롤 강제 해제 */
    overscroll-behavior-x: contain;
    overscroll-behavior-y: contain;
    overscroll-behavior: contain;
    scroll-behavior: auto !important;
    /* theme의 html{scroll-behavior:smooth} 무력화 */
    scroll-snap-type: none !important;
    /* 전역 스냅과 충돌 금지 */
    scrollbar-gutter: stable both-edges;
    /* 초기 진입 시 스크롤바 폭 변동으로 hLen 흔들림 방지 */
    overflow-anchor: none !important;
    /* 스크롤 앵커링으로 인한 역주행 방지 */
}

/* UA 제스처 전면 차단: 가로/세로 모두 기본 스크롤 금지 → JS가 직접 처리 */
.th_sl-stage[data-mode="overflow"],
.th_sl-stage[data-mode="overflow"]>.th_sl-inner,
.th_sl-stage[data-mode="overflow"]>.sl-inner {
    touch-action: none !important;
}

/* ➌ 활성 상태(잠금): UA 제스처 전부 차단 → 중간에서 절대 위/아래로 이탈 불가
      (html/body에 토글되든, root/stage에 직접 토글되든 모두 커버) */
html.sl-snap-off .th_sl-stage[data-mode="overflow"],
html.sl-snap-off .th_sl-stage[data-mode="overflow"]>.th_sl-inner,
html.sl-snap-off .th_sl-stage[data-mode="overflow"]>.sl-inner,
.th_sl-root.sl-snap-off .th_sl-stage[data-mode="overflow"],
.th_sl-root.sl-snap-off .th_sl-stage[data-mode="overflow"]>.th_sl-inner,
.th_sl-root.sl-snap-off .th_sl-stage[data-mode="overflow"]>.sl-inner,
.th_sl-stage.sl-snap-off[data-mode="overflow"],
.th_sl-stage.sl-snap-off[data-mode="overflow"]>.th_sl-inner,
.th_sl-stage.sl-snap-off[data-mode="overflow"]>.sl-inner {
    touch-action: none !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
    overscroll-behavior-x: contain !important;
}

.th_sl-stage[data-mode="overflow"]>.th_sl-inner,
.th_sl-stage[data-mode="overflow"]>.sl-inner {
    height: 100%;
    /* transform 금지: 합성 cull 방지 */
    transform: none !important;
    scroll-snap-align: none !important;
    overflow-anchor: none !important;
    overflow: visible !important;
}

/* 조상/자식에 남아있는 스냅 속성 강제 무력화 */
.th_sl-stage[data-mode="overflow"] *,
.th_sl-stage[data-mode="overflow"] *::before,
.th_sl-stage[data-mode="overflow"] *::after {
    scroll-snap-type: none !important;
    scroll-snap-align: none !important;
    overflow-anchor: none !important;
}

/* 터치 디바이스에서도 관성 스크롤/스무스 스크롤 금지 */
@media (hover: none) and (pointer: coarse) {
    .th_sl-stage[data-mode="overflow"] {
        -webkit-overflow-scrolling: auto !important;
        scroll-behavior: auto !important;
    }
}

@media (hover: hover) and (pointer: fine) {
    .th_sl-stage[data-mode="overflow"] {
        -webkit-overflow-scrolling: auto;
    }
}

/* 가로 스크롤바 완전 숨김 (JS가 scroller에 .sl-no-scrollbar 클래스를 부여) */
.sl-no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sl-no-scrollbar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* 듀얼 변형 래퍼 기본 */
.sl-dual {
    position: relative;
}

.sl-variant {
    display: block;
}