/* 별, 손가락 안내, 책장 표지, 이어 읽기 알림, 붙일 자리 톡, 선택·확대 막기.
   css/ 의 파일은 index.html 에서 번호 순서대로 겹쳐 적용된다(뒤 파일이 앞 파일을 덮는다). 순서를 바꾸지 말 것. */
/* 붙인 자리에서 튀는 별 */
.sparkle-burst {
  position: absolute;
  z-index: 7;
  width: 0;
  height: 0;
  pointer-events: none;
}
.sparkle-burst span {
  position: absolute;
  left: -11px;
  top: -11px;
  width: 22px;
  height: 22px;
  background: #ffd34d;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 3px #fff8);
  animation: sparkle-out 0.8s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.sparkle-burst span:nth-child(even) {
  width: 15px;
  height: 15px;
  left: -7px;
  top: -7px;
  background: #fff3b0;
}
@keyframes sparkle-out {
  0% {
    transform: translate(0, 0) scale(0.2) rotate(0);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx),var(--dy)) scale(1) rotate(160deg);
    opacity: 0;
  }
}

/* 손가락 안내: 맞는 스티커 → 붙일 자리 */
.hand-guide {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 150;
  width: 0;
  height: 0;
  pointer-events: none;
}
.hand-guide .guide-sticker {
  position: absolute;
  left: -44px;
  top: -44px;
  width: 88px;
  opacity: 0.75;
  filter: drop-shadow(0 6px 8px #30271d40);
}
.hand-guide .guide-sticker img {
  width: 100%;
  height: 88px;
  object-fit: contain;
}
.hand-guide .guide-hand {
  position: absolute;
  left: -6px;
  top: -4px;
  width: 64px;
  height: 64px;
  fill: #fffaf1;
  stroke: #2f4a3c;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 6px #0004);
}

/* 책장 표지: 표지용 작은 그림(assets/covers, 640px) */
.book-cover .cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 이어 읽기 알림 */
.resume-toast {
  position: fixed;
  left: 50%;
  top: 118px;
  z-index: 160;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 999px;
  background: #2f4a3cf0;
  color: #fff;
  font:
    18px/1.3 Jua,
    sans-serif;
  box-shadow: 0 8px 24px #2b3f2f33;
  pointer-events: none;
  animation: toast-in 0.25s ease-out both;
}
.resume-toast.leaving {
  opacity: 0;
  transition: opacity 0.3s;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, -8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .resume-toast {
    animation: none;
  }
}

/* 붙일 자리: 질문을 읽기 시작할 때 톡 나타난다 */
.board.target-pending #target {
  visibility: hidden;
}
#reader #target.reveal {
  animation: target-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
@keyframes target-pop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  #reader #target.reveal {
    animation: none;
  }
}
/* 읽기 화면: 빈 곳을 누르거나 길게 눌러도 글·그림이 선택(파랗게)되거나 복사 메뉴가 뜨지 않게 */
#reader,
#finish {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#reader img,
#finish img {
  -webkit-user-drag: none;
}
/* 확대 막기: 두 번 톡 눌러 확대하지 않게(핀치는 story/base.js 에서 막음) */
html,
body {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}