/**
 * @fileoverview 편지지 — 고도화 추가 스타일시트
 * @project 편지지 (빈티지 편지 앨범)
 * @generated 20260526_210000
 *
 * 이 파일은 styles.css, theme-pink.css를 수정하지 않고
 * CSS Cascade로 override하는 추가 스타일시트이다.
 * HTML에서 theme-pink.css 다음에 로드한다.
 *
 * 포함 내용:
 *  1. Google Fonts 임포트 (Gaegu)
 *  2. 신규 CSS Variables (:root)
 *  3. 폰트 교체 — Gaegu 손글씨 적용
 *  4. 폴라로이드 카드 강화 (테이프, 골드 테두리, 스티커)
 *  5. 커버 오버레이 레이어
 *  6. 양쪽 여백 하트 패턴 (theme-pink.css Override)
 *  7. 카드 진입 스크롤 애니메이션
 *  8. 클릭 하트 파티클
 *  9. prefers-reduced-motion 대응
 */

/* =========================================================================
   1. Google Fonts — Gaegu (손글씨 서체)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@300;400;700&display=swap');

/* =========================================================================
   2. 신규 CSS Variables
   ========================================================================= */

:root {
  /* 폰트 — 손글씨 */
  --font-body: 'Gaegu', 'Nanum Myeongjo', Georgia, serif;
  --font-handwriting: 'Gaegu', cursive;

  /* 골드 토큰 (공식 승격) */
  --color-gold:       #C9A84C;
  --color-gold-light: #F0D98C;
  --color-gold-dark:  #9E7A2A;
  --shadow-gold:      0 2px 12px rgba(201, 168, 76, 0.30);

  /* 애니메이션 — 카드 진입 */
  --anim-card-enter-duration:   600ms;
  --anim-card-enter-easing:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --anim-card-enter-translateY: 30px;

  /* 애니메이션 — 클릭 하트 */
  --anim-heart-duration:   900ms;
  --anim-heart-easing:     ease-out;
  --anim-heart-translateY: -80px;

  /* 패턴 — 양쪽 여백 하트 */
  --pattern-heart-size:    60px;
  --pattern-heart-color:   #F0B8CB;
  --pattern-heart-opacity: 0.28;

  /* z-index — 하트 파티클 최상위 */
  --z-heart-particle: 600;
}

/* =========================================================================
   3. 폰트 교체 — Gaegu 손글씨 적용
   ========================================================================= */

body {
  font-family: var(--font-body);
}

/**
 * 폴라로이드 / 편지 카드 본문에 손글씨 폰트 적용
 * .form-textarea에도 동일하게 적용해 입력 시 손글씨 느낌 부여
 */
.polaroid__text,
.letter-card__text,
.form-textarea {
  font-family: var(--font-handwriting);
  font-size: 1.05rem;
  line-height: 1.8;
}

/* =========================================================================
   4. 폴라로이드 카드 강화
   ========================================================================= */

/**
 * 기본 .polaroid — 골드 테두리 강화 및 box-shadow 다층 적용
 * overflow: visible — 테이프 가상 요소가 카드 밖으로 나와야 함
 */
.polaroid {
  position: relative;
  overflow: visible;
  border: 2px solid rgba(201, 168, 76, 0.45);
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.12),
    0 1px 4px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(201, 168, 76, 0.15),
    var(--shadow-gold, 0 2px 12px rgba(201, 168, 76, 0.30));
  padding-bottom: 28px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.polaroid:hover {
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.20),
    0 0 0 2px rgba(201, 168, 76, 0.40),
    var(--shadow-gold, 0 2px 12px rgba(201, 168, 76, 0.30));
}

.polaroid:active {
  transform: rotate(0deg) scale(0.99) !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.12),
    var(--shadow-gold, 0 2px 12px rgba(201, 168, 76, 0.30));
}

/**
 * 상단 테이프 효과 — .polaroid::before 가상 요소
 * 반투명 핑크 테이프를 상단 중앙에 배치, 광택 줄무늬 포함
 */
.polaroid::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 72px;
  height: 28px;
  background-color: rgba(255, 240, 245, 0.75);
  background-image: repeating-linear-gradient(
    105deg,
    transparent 0px,
    transparent 6px,
    rgba(255, 255, 255, 0.35) 6px,
    rgba(255, 255, 255, 0.35) 8px
  );
  border: 1px solid rgba(240, 184, 203, 0.50);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  z-index: 2;
}

/**
 * 우하단 하트 스티커 — .polaroid::after 가상 요소
 * 작은 하트 이모지를 우하단에 살짝 기울여 배치
 */
.polaroid::after {
  content: '🩷';
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 1rem;
  opacity: 0.7;
  transform: rotate(15deg);
  pointer-events: none;
  user-select: none;
  z-index: 3;
  line-height: 1;
}

/**
 * 폴라로이드 스티커 — JS가 동적으로 삽입하는 span 요소
 * 카드 4모서리에 배치 가능
 */
.polaroid__sticker {
  position: absolute;
  font-size: 1.4rem;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 3;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.polaroid__sticker--tl { top: -8px;  left: 8px; }
.polaroid__sticker--tr { top: -8px;  right: 8px; }
.polaroid__sticker--bl { bottom: 8px; left: 4px; }
.polaroid__sticker--br { bottom: 8px; right: 4px; }

/**
 * 폴라로이드 본문 텍스트 — 손글씨 폰트 및 색상 강화
 */
.polaroid__text {
  font-family: var(--font-handwriting, 'Gaegu', cursive);
  font-size: 1rem;
  line-height: 1.65;
  color: #3a1a2a;
  margin: 0 0 8px;
  white-space: pre-wrap;
}

/* =========================================================================
   5. 커버 섹션 강화
   ========================================================================= */

/**
 * .cover-bg — filter 제거 (오버레이 레이어로 대체)
 * 사진 없을 때 핑크 그라디언트 fallback 유지
 */
.cover-bg {
  filter: none;
  background: linear-gradient(135deg, #FFB6C1 0%, #FF69B4 100%);
  background-size: cover;
  background-position: center;
  transition: background-image 0.4s ease;
  z-index: 0;
}

/**
 * .cover-overlay — 오버레이 그라디언트 레이어 (신규)
 * 배경 사진 위에 반투명 그라디언트를 적용해 텍스트 가독성 보장
 */
.cover-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(123, 31, 58, 0.15) 0%,
    rgba(75, 16, 48, 0.50) 60%,
    rgba(50, 10, 30, 0.72) 100%
  );
  pointer-events: none;
}

/**
 * .cover-content — z-index 2로 오버레이 위에 표시
 */
.cover-content {
  z-index: 2;
}

/* =========================================================================
   6. 양쪽 여백 하트 패턴 — theme-pink.css Override
   ========================================================================= */

/**
 * 기존 theme-pink.css의 복합 패턴(하트+꽃+별)을
 * 단순한 하트 단일 패턴으로 교체한다.
 * min-width: 1100px 이상 데스크탑에서만 표시.
 */
@media (min-width: 1100px) {
  .page-wrapper {
    position: relative;
    overflow: visible;
  }

  .page-wrapper::before,
  .page-wrapper::after {
    content: '';
    position: fixed;
    top: 0;
    width: calc((100vw - 680px) / 2 - 20px);
    min-width: 60px;
    height: 100vh;
    pointer-events: none;
    z-index: var(--z-deco, 1);

    /* 하트 단일 패턴 SVG — #F0B8CB (primary-300) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 48 C30 48 10 36 10 22 C10 14 16 10 22 14 C25 16 28 20 30 24 C32 20 35 16 38 14 C44 10 50 14 50 22 C50 36 30 48 30 48 Z' fill='%23F0B8CB'/%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-size: 60px 60px;
    opacity: 0.28;
  }

  .page-wrapper::before {
    left: 0;
  }

  .page-wrapper::after {
    right: 0;
    transform: scaleX(-1);
  }
}

/* 모바일/태블릿 — 완전 숨김 */
@media (max-width: 1099px) {
  .page-wrapper::before,
  .page-wrapper::after {
    display: none;
  }
}

/* =========================================================================
   7. 카드 진입 스크롤 애니메이션
   ========================================================================= */

/**
 * @keyframes card-enter — 카드가 뷰포트에 진입할 때 fade-in + slide-up
 */
@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(var(--anim-card-enter-translateY, 30px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * .card-animate — 뷰포트 진입 전 초기 상태 (숨김)
 * IntersectionObserver가 .card-animate--visible 클래스를 추가해 애니메이션 실행
 */
.card-animate {
  opacity: 0;
  transform: translateY(var(--anim-card-enter-translateY, 30px));
}

/**
 * .card-animate--visible — JS가 IntersectionObserver로 추가하는 클래스
 * card-enter 애니메이션 실행 후 opacity: 1, translateY(0) 유지
 */
.card-animate--visible {
  animation: card-enter var(--anim-card-enter-duration, 600ms)
    var(--anim-card-enter-easing, cubic-bezier(0.22, 0.61, 0.36, 1))
    forwards;
}

/**
 * .is-visible — scroll-animate.js의 구버전 호환 클래스명 지원
 * initScrollAnimate()에서 .is-visible을 사용하는 경우 대응
 */
.card-animate.is-visible {
  animation: card-enter var(--anim-card-enter-duration, 600ms)
    var(--anim-card-enter-easing, cubic-bezier(0.22, 0.61, 0.36, 1))
    forwards;
}

/* =========================================================================
   8. 클릭 하트 파티클
   ========================================================================= */

/**
 * @keyframes heart-float — 클릭 위치에서 하트가 올라오며 사라지는 애니메이션
 */
@keyframes heart-float {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.4);
  }
  40% {
    opacity: 0.9;
    transform: translate(-50%, calc(-50% - 40px)) scale(1.2);
  }
  70% {
    opacity: 0.5;
    transform: translate(-50%, calc(-50% - 65px)) scale(1.0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 80px)) scale(0.8);
  }
}

/**
 * .click-heart — JS가 동적으로 document.body에 삽입하는 하트 파티클 요소
 * transform: translate(-50%, -50%)로 클릭 위치 중앙 정렬
 */
.click-heart {
  position: fixed;
  pointer-events: none;
  user-select: none;
  z-index: var(--z-heart-particle, 600);
  font-size: 1.4rem;
  line-height: 1;
  transform: translate(-50%, -50%);
  animation: heart-float var(--anim-heart-duration, 900ms)
    var(--anim-heart-easing, ease-out)
    forwards;
  will-change: transform, opacity;
}

/**
 * @keyframes click-heart-rise — scroll-animate.js 호환용 대체 키프레임
 * click-heart.js에서 animationDelay로 순차 생성 시 사용
 */
@keyframes click-heart-rise {
  0%   { opacity: 1;  transform: translateY(0) scale(1); }
  100% { opacity: 0;  transform: translateY(-60px) scale(1.4); }
}

/* =========================================================================
   9. prefers-reduced-motion 대응
   ========================================================================= */

/**
 * 모션 감소 접근성 설정 시 카드 진입 애니메이션 및 클릭 하트 즉시 표시
 */
@media (prefers-reduced-motion: reduce) {
  .card-animate {
    opacity: 1;
    transform: none;
  }

  .card-animate--visible,
  .card-animate.is-visible {
    animation: none;
  }

  .click-heart {
    animation-duration: 0.01ms;
  }
}