.sg-wrap { position: relative; width: 100%; }

  /* stage는 JS 초기화 전까지는 숨김 (겹쳐 보이는 깜빡임 방지) */
  .sg-stage { display: none; position: sticky; top: 0; height: 100vh;
              display: flex; align-items: center; justify-content: center;
              overflow: hidden; z-index: 1; background: transparent; }

  /* JS 초기화가 끝나면 .is-ready를 붙여 stage 표시 */
  .sg-wrap.is-ready .sg-stage { display: flex; }

  .sg-step { position: absolute; left: 50%; transform: translateX(-50%);
             height: auto; opacity: 0;
            transition: opacity 500ms ease; will-change: opacity; pointer-events: none; }
  .sg-step.is-active { opacity: 1; }

  .sg-steps { position: relative; z-index: 0; }
  .sg-step {width: 80%; }

  .sg-padding { height: 20vh; }

  /* 원본 이미지 컨테이너: 기본 표시 상태 → JS 성공 시에만 숨김 */
  .sg-source { margin: 0 auto;}
  .sg-wrap.is-ready .sg-source { display: none; } /* JS 성공 후 숨김 */

  /* ===== 캐럿/선택/포커스 완전 차단 ===== */
  .sg-wrap, .sg-stage, .sg-steps, .sg-step {
    caret-color: transparent;
    /*user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    cursor: default;*/
    outline: none;
  }
  .sg-img {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
  }

  /* 휠 스텝 전환 중 과도한 바운스를 줄임 */
  .sg-wrap.is-ready { overscroll-behavior: contain; }

  @media (prefers-reduced-motion: reduce) {
    .sg-img { transition: none; }
  }