.stf__parent {
  position: relative;
  display: block;
  box-sizing: border-box;
  /* 정지 상태에선 GPU 합성 레이어를 만들지 않음(translateZ 제거) → 윈도우 ClearType(서브픽셀 AA) 복원.
     책 넘김 중에만 .is-flipping 으로 레이어를 복원(파일 하단 규칙 참고).
     !important: StPageFlip 이 런타임에 동일 규칙(translateZ)을 <style>로 주입하므로 그걸 이겨야 함. */
  transform: none !important;

  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.sft__wrapper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.stf__parent canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.stf__block {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  perspective: 2000px;
}

.stf__item {
  display: none;
  position: absolute;
  /* 정지 상태에선 평면(flat) → 합성 레이어 해제로 텍스트가 또렷하게(윈도우 ClearType).
     평면 종이라 회전(rotateY)엔 preserve-3d가 불필요. 넘김 중엔 .is-flipping 으로 복원.
     !important: 라이브러리가 런타임 주입하는 preserve-3d 규칙을 이겨야 함. */
  transform-style: flat !important;
}

/* 책 넘김(또는 모서리 드래그) 중에만 3D 합성 컨텍스트 복원 → 회전 품질 유지.
   .is-flipping 은 reader.js 가 StPageFlip changeState 이벤트로 #r-paper 에 토글. */
.is-flipping .stf__parent { transform: translateZ(0) !important; }
.is-flipping .stf__item { transform-style: preserve-3d !important; }

.stf__outerShadow {
  position: absolute;
  left: 0;
  top: 0;
}

.stf__innerShadow {
  position: absolute;
  left: 0;
  top: 0;
}

.stf__hardShadow {
  position: absolute;
  left: 0;
  top: 0;
}

.stf__hardInnerShadow {
  position: absolute;
  left: 0;
  top: 0;
}