/* ==========================================================================
   말씀나눔터 - 모바일 최적화 및 PWA 스타일시트
   ========================================================================== */

/* 웹 폰트 (Pretendard & Noto Serif KR) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;600;700&display=swap');

:root {
  --color-paper: #FBF9F5;
  --color-forest: #2C4F3B;
  --color-sage: #4E6E5D;
  --color-gold: #C5A059;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: text;
  box-sizing: border-box;
}

body {
  background-color: #F0EDE6;
  color: #2D312E;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 성경 본문 전용 서체 (명조/세리프 계열로 차분하고 우아한 가독성) */
.font-bible {
  font-family: "Noto Serif KR", serif;
  line-height: 1.85;
  letter-spacing: -0.01em;
}

/* Safe Area 패딩 */
.pt-safe {
  padding-top: max(12px, env(safe-area-inset-top));
}

.pb-safe {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* 스크롤바 숨기기 */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 성경 절(Verse) 인터랙션 */
.verse-item {
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 6px;
  padding: 3px 6px;
  margin: 2px -6px;
  cursor: pointer;
}

.verse-item:hover, .verse-item:active {
  background-color: rgba(44, 79, 59, 0.05);
}

.verse-item.selected-verse {
  outline: 2px dashed #2C4F3B;
  outline-offset: 2px;
  background-color: rgba(44, 79, 59, 0.08);
}

/* 형광펜(하이라이트) 색상 클래스 */
.hl-yellow {
  background: linear-gradient(180deg, transparent 20%, #FEF08A 20%, #FEF08A 90%, transparent 90%);
  border-radius: 4px;
}

.hl-green {
  background: linear-gradient(180deg, transparent 20%, #BBF7D0 20%, #BBF7D0 90%, transparent 90%);
  border-radius: 4px;
}

.hl-blue {
  background: linear-gradient(180deg, transparent 20%, #BAE6FD 20%, #BAE6FD 90%, transparent 90%);
  border-radius: 4px;
}

.hl-pink {
  background: linear-gradient(180deg, transparent 20%, #FBCFE8 20%, #FBCFE8 90%, transparent 90%);
  border-radius: 4px;
}

.hl-underline {
  text-decoration: underline;
  text-decoration-color: #2C4F3B;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

/* 스탬프 애니메이션 */
@keyframes stampIn {
  0% {
    opacity: 0;
    transform: scale(3) rotate(-20deg);
  }
  50% {
    opacity: 0.9;
    transform: scale(0.9) rotate(-8deg);
  }
  75% {
    transform: scale(1.05) rotate(-11deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(-10deg);
  }
}

.stamp-effect {
  animation: stampIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 바텀시트 슬라이드업 */
@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-up {
  animation: slideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 펄스 애니메이션 */
@keyframes pulseSubtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}

.animate-pulse-subtle {
  animation: pulseSubtle 2s infinite ease-in-out;
}