@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;500&display=swap");

:root{
  --bg: #eef4ff;
  --text: rgba(20, 20, 24, .86);
  --muted: rgba(20, 20, 24, .55);

  --env: #ffffff;
  --env2: rgba(0,0,0,.04);
  --paper: #ffffff;

  --env-shadow: 0 16px 48px rgba(0,0,0,.14);
  --paper-shadow: 0 22px 70px rgba(0,0,0,.18);

  /* ========= 속도(여기만 조절) ========= */
  --zoom-dur: 1000ms;     /* A->B 확대 이동 */
  --open-dur: 650ms;      /* 봉투 열림 */
  --finish-dur: 700ms;    /* 드래그 완료 */
  --snap-dur: 520ms;      /* 드래그 취소 */
  --ease: cubic-bezier(.16,1,.2,1);

  /* envelope 크기 */
  --env-small-w: 58px;
  --env-small-h: 42px;

  --env-big-w: 300px;
  --env-big-h: 215px;

  /* letter 기본 크기(봉투 안) */
  --letter-w: 270px;
  --letter-h: 380px;

  /* 드래그 진행도 */
  --p: 0;

  /* letter: 완전 숨김 시작 + 드래그로 상승 */
  --letter-start-y: 255px;
  --letter-rise: 330px;

  /* letter: 드래그 시 “가득 채우기” 목표값 */
  --letter-target-w: calc(100vw - 20px);   /* 좌우 10px */
  --letter-target-h: calc(100svh - 28px - env(safe-area-inset-bottom, 0px));

  /* safe-area */
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: "Noto Serif KR", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.stage{
  position: relative;
  height: 100svh;
  overflow: hidden;
}

.cover{
  position: relative;
  height: 100%;
  background: var(--bg);
  padding: 64px 20px 72px;
}

.cover-text{
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  width: min(88vw, 520px);
  text-align: center;
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}

.cover-names{
  margin: 0 0 22px;
  font-weight: 400;
  letter-spacing: .06em;
  font-size: clamp(26px, 7vw, 42px);
}
.cover-date{
  margin: 0 0 28px;
  font-weight: 400;
  letter-spacing: .06em;
  font-size: clamp(24px, 6.2vw, 38px);
}
.cover-msg{
  margin: 0;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: .04em;
  font-size: clamp(18px, 5vw, 28px);
}

.envelope-stage{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* env-wrap: 항상 100vw + 내부 중앙정렬 (A/B/C 공통) */
.env-wrap{
  position: fixed;
  left: 0;
  right: 0;
  width: 100vw;
  height: auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;

  padding-left: var(--safe-left);
  padding-right: var(--safe-right);

  z-index: 10;
  pointer-events: auto;
}

.env-hint{
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .02em;
  text-align: center;
  width: min(320px, 86vw);
  max-width: 86vw;
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}

/* ===== envelope ===== */
.envelope{
  position: relative;
  width: var(--env-small-w);
  height: var(--env-small-h);
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.10));
  cursor: pointer;
  user-select: none;
  -webkit-user-select:none;
  touch-action:none;

  transform-origin: center center;
  will-change: transform;
}

/* 레이어 */
.env-back{ z-index:1; }
.letter{ z-index:2; }
.env-front{ z-index:3; }
.env-flap{ z-index:4; }

.env-back{
  position:absolute;
  inset:0;
  background: var(--env);
  border-radius: 6px;
}

.env-front{
  position:absolute;
  inset:0;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--env2), rgba(0,0,0,0));
  clip-path: polygon(0% 50%, 50% 76%, 100% 50%, 100% 100%, 0% 100%);
  opacity: .96;
  pointer-events: none;
}

.env-flap{
  position:absolute;
  inset:0;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--env2), rgba(0,0,0,0));
  clip-path: polygon(0% 0%, 100% 0%, 50% 58%);
  transform-origin: 50% 0%;
  transform: rotateX(0deg);
  transition: transform var(--open-dur) var(--ease);
  will-change: transform;
  pointer-events: none;
}

/* ===== letter ===== */
.letter{
  position:absolute;
  left: 50%;
  bottom: 12px;

  /* 기본은 봉투 안 크기 */
  width: var(--letter-w);
  height: var(--letter-h);

  /* p에 따라 “가득 채우기”로 확대 (좌우 10px) */
  width: calc(var(--letter-w) + (var(--letter-target-w) - var(--letter-w)) * var(--p));
  height: calc(var(--letter-h) + (var(--letter-target-h) - var(--letter-h)) * var(--p));

  transform: translateX(-50%) translateY(var(--letter-start-y));
  will-change: transform, clip-path, width, height;
  pointer-events: none;
}

.letter-paper{
  width:100%;
  height:100%;
  background: var(--paper);
  border-radius: 12px;
  box-shadow: var(--paper-shadow);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
}

.letter-header{
  padding: 14px 16px;
  font-size: 12px;
  letter-spacing: .16em;
  color: rgba(20,20,24,.55);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.letter-body{
  padding: 16px 16px 18px;
  display: grid;
  gap: 10px;

  /* 내용 점진 노출 */
  -webkit-mask-image: linear-gradient(
    to top,
    rgba(0,0,0,1) calc(var(--p) * 100%),
    rgba(0,0,0,0) calc(var(--p) * 100% + 12%)
  );
  mask-image: linear-gradient(
    to top,
    rgba(0,0,0,1) calc(var(--p) * 100%),
    rgba(0,0,0,0) calc(var(--p) * 100% + 12%)
  );
}

.line{
  margin:0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(20,20,24,.82);
}
.dim{
  margin:0;
  color: rgba(20,20,24,.55);
  font-size: 13px;
}

/* ===== 단계 ===== */

/* A: 중앙 하단 */
.stage[data-step="A"] .env-wrap{
  bottom: calc(40px + var(--safe-bottom));
  top: auto;
}
.stage[data-step="A"] .letter{ display:none; }

/* ✅ B: 확대/이동 중에는 편지지가 절대 밖으로 나오면 안 됨 */
.stage[data-step="B"] .letter{ display:none; }           /* 핵심 1: B에서 letter 자체 제거 */
.stage[data-step="B"] .envelope{ overflow:hidden; }      /* 핵심 2: B에서 어떤 레이어도 새지 않게 */

/* B: “화면 하단에서 확대” (bottom anchor) */
.stage[data-step="B"] .env-wrap,
.stage[data-step="C"] .env-wrap,
.stage[data-step="D"] .env-wrap{
  bottom: calc(18px + var(--safe-bottom));
  top: auto;
  transform: none;
  z-index: 50;
}

.stage[data-step="B"] .env-hint{
  opacity: 0;
  transform: translateY(6px);
}

/* B/C/D: 봉투는 큰 크기 */
.stage[data-step="B"] .envelope,
.stage[data-step="C"] .envelope,
.stage[data-step="D"] .envelope{
  width: var(--env-big-w);
  height: var(--env-big-h);
  filter: drop-shadow(var(--env-shadow));
}

/* C: 열림 + 드래그 */
.stage[data-step="C"] .env-flap{
  transform: rotateX(-165deg);
}
.stage[data-step="C"] .letter{ display:block; pointer-events:auto; }
.stage[data-step="D"] .letter{ display:block; }

/* C에서는 편지지가 위로 나오기 시작하므로 overflow 제한 해제(기본값 visible) */
.stage[data-step="C"] .envelope,
.stage[data-step="D"] .envelope{
  overflow: visible;
}

/* C/D: 편지지는 드래그(p)로만 위로 올라옴 */
.stage[data-step="C"] .letter,
.stage[data-step="D"] .letter{
  transform: translateX(-50%) translateY(calc(var(--letter-start-y) - (var(--p) * var(--letter-rise))));
}

/* 봉투를 뚫고 나오는 느낌 방지: p가 0일 때 거의 완전 숨김 */
.stage[data-step="C"] .letter,
.stage[data-step="D"] .letter{
  clip-path: inset(0 0 calc((1 - var(--p)) * 92%) 0 round 12px);
  transition: clip-path 140ms linear;
}

/* 봉투는 p에 따라 살짝 내려감(편지지 강조) */
.stage[data-step="C"] .envelope,
.stage[data-step="D"] .envelope{
  transform: translateY(calc(var(--p) * 90px));
}

/* 텍스트 처리 */
.stage[data-step="B"] .cover-text,
.stage[data-step="C"] .cover-text,
.stage[data-step="D"] .cover-text{
  opacity: .15;
  transform: translateX(-50%) translateY(-6px);
}

.main{
  position:absolute;
  inset:0;
  padding: 22px 14px calc(22px + var(--safe-bottom));
  display: grid;
  align-content: start;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms var(--ease);
}

.main-card{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 18px 48px rgba(0,0,0,.10);
}

.main-title{
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: .02em;
}
.main-text{
  margin: 0;
  color: rgba(20,20,24,.70);
  line-height: 1.6;
}

.stage[data-step="D"] .main{
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce){
  .env-flap, .cover-text, .env-hint, .main{ transition: none !important; }
}