/* 읽어줘 곰곰 — Tailwind로 표현하기 어려운 애니메이션·터치 관련 스타일 */

html,
body {
  height: 100%;
}

body {
  /* 은은한 물방울 무늬 배경 */
  background-color: #fff6e5;
  background-image: radial-gradient(#ffe2b8 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

button {
  touch-action: manipulation; /* 더블탭 확대 방지 */
  cursor: pointer;
}

button:disabled {
  opacity: 0.55;
  cursor: default;
}

img {
  -webkit-user-drag: none;
}

/* body의 user-select: none 때문에 iOS에서 입력칸에 글자를 못 치는 문제 방지 */
input {
  -webkit-user-select: text;
  user-select: text;
}

/* 노치/홈바 영역 피하기 */
.pt-safe { padding-top: max(1rem, env(safe-area-inset-top)); }
.pb-safe { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }

/* 화면 전환 */
.screen:not(.hidden) {
  animation: pop-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 버튼 ---------- */

/* 눌리는 느낌의 통통한 3D 버튼 (--edge: 아래 그림자 색) */
.chunky {
  box-shadow: 0 8px 0 var(--edge, rgba(0, 0, 0, 0.15)), 0 14px 24px rgba(91, 58, 41, 0.18);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.chunky:active:not(:disabled) {
  transform: translateY(6px);
  box-shadow: 0 2px 0 var(--edge, rgba(0, 0, 0, 0.15)), 0 4px 10px rgba(91, 58, 41, 0.18);
}

.press { transition: transform 0.1s ease; }
.press:active { transform: scale(0.94); }

.ctrl-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 6.5rem;
  border-radius: 1.75rem;
  font-size: 1.2rem;
  color: #5b3a29;
}

/* 메인 카메라 버튼의 퍼지는 물결 */
.pulse-ring::before,
.pulse-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 6px solid #ff8a65;
  opacity: 0;
  animation: ring 2.4s ease-out infinite;
  pointer-events: none;
}

.pulse-ring::after { animation-delay: 1.2s; }

@keyframes ring {
  0%   { transform: scale(1);    opacity: 0.55; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* 아이의 시선을 끄는 통통 튀기 (다 읽었을 때 '다음 장', 재생이 막혔을 때 '듣기') */
.attention {
  animation: hop 1s ease-in-out infinite;
}

@keyframes hop {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-10px); }
  60%      { transform: translateY(-4px); }
}

/* ---------- 곰곰이 마스코트 ---------- */

.bear .eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 4.2s infinite;
}

@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.1); }
}

.bear .mouth-open { opacity: 0; }

/* 읽어주는 동안 입을 오물오물 */
.talking .bear .mouth-open { animation: talk 0.36s infinite alternate; }
.talking .bear .mouth      { animation: talk 0.36s infinite alternate-reverse; }
.talking { animation: nod 1.4s ease-in-out infinite; }

@keyframes talk {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes nod {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

.bear-wiggle { animation: wiggle 2.8s ease-in-out infinite; }

@keyframes wiggle {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg) translateY(-6px); }
}

.bear-bob { animation: bob 1.2s ease-in-out infinite; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.bear-sad { transform: rotate(-8deg); filter: saturate(0.75); }

.tear {
  position: absolute;
  top: 48%;
  left: 24%;
  font-size: 1.6rem;
  animation: drip 1.8s ease-in infinite;
}

@keyframes drip {
  0%   { transform: translateY(0);    opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(26px); opacity: 0; }
}

/* ---------- 로딩 ---------- */

/* 사진 위를 위아래로 훑는 스캔 줄 */
.scan-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0.6rem;
  background: linear-gradient(to bottom, transparent, rgba(255, 138, 101, 0.85), transparent);
  box-shadow: 0 0 18px rgba(255, 138, 101, 0.7);
  animation: scan 2.2s ease-in-out infinite alternate;
}

@keyframes scan {
  from { transform: translateY(0); }
  to   { transform: translateY(15rem); }
}

#photo-viewer:not(.hidden) { display: flex; }

/* 곰곰이 머리 위로 글자들이 둥실둥실 */
.floating-letters span {
  position: absolute;
  bottom: 30%;
  font-size: 1.9rem;
  color: #ff8a65;
  opacity: 0;
  animation: float-up 3s ease-in infinite;
}

.floating-letters span:nth-child(1) { left: 8%;  animation-delay: 0s; }
.floating-letters span:nth-child(2) { left: 80%; animation-delay: 0.5s; color: #4fb58d; }
.floating-letters span:nth-child(3) { left: 28%; animation-delay: 1s;   color: #e5ae36; }
.floating-letters span:nth-child(4) { left: 64%; animation-delay: 1.5s; color: #d9668f; }
.floating-letters span:nth-child(5) { left: 16%; animation-delay: 2s;   color: #4fb58d; }
.floating-letters span:nth-child(6) { left: 72%; animation-delay: 2.5s; }

@keyframes float-up {
  0%   { transform: translateY(0) rotate(0);        opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(-150px) rotate(20deg); opacity: 0; }
}

.dots { display: flex; gap: 0.6rem; }

.dots span {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 9999px;
  background: #ff8a65;
  animation: hop 0.9s ease-in-out infinite;
}

.dots span:nth-child(2) { background: #ffd166; animation-delay: 0.15s; }
.dots span:nth-child(3) { background: #7ed6b2; animation-delay: 0.3s; }

.fade-swap { transition: opacity 0.25s ease; }
.fade-swap.is-swapping { opacity: 0; }

/* ---------- 본문 ---------- */

.story-card {
  -webkit-overflow-scrolling: touch;
  word-break: keep-all;      /* 한국어 단어 중간에서 줄바꿈하지 않기 */
  overflow-wrap: anywhere;
}

.story-card p + p { margin-top: 1.1em; }

.sentence {
  border-radius: 0.4em;
  padding: 0.05em 0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color 0.25s ease, color 0.25s ease;
  cursor: pointer;
}

/* 지금 읽고 있는 문장 */
.sentence.reading {
  background-color: #ffe8a3;
  color: #3b2a20;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}