/* 선물 찾기 — warm letterpress love-letter
 * 크림 페이퍼 위 잉크 브라운, 테라코타 왁스 실, 손글씨 악센트, 종이 그레인.
 */
:root {
  --paper:    #f3ead9;
  --paper-2:  #f8f1e4;
  --paper-hi: #fdf8ee;
  --ink:      #2c231c;
  --ink-soft: #6a5a4a;
  --ink-faint:#a2917c;
  --terra:    #b6462d;
  --terra-2:  #9a3823;
  --rose:     #c2726a;
  --gold:     #a9823f;
  --line:     rgba(44, 35, 28, 0.16);
  --line-2:   rgba(44, 35, 28, 0.28);

  --display: 'Fraunces', 'Gowun Batang', serif;
  --serif:   'Gowun Batang', 'Fraunces', serif;
  --hand:    'Nanum Pen Script', 'Gowun Batang', cursive;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

body {
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(130% 90% at 50% -20%, #fbf5ea 0%, rgba(251,245,234,0) 55%),
    radial-gradient(120% 70% at 80% 120%, rgba(194,114,106,0.14) 0%, rgba(194,114,106,0) 55%),
    radial-gradient(110% 70% at 10% 110%, rgba(169,130,63,0.12) 0%, rgba(169,130,63,0) 50%),
    var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:
    max(clamp(12px, 2.5vh, 32px), env(safe-area-inset-top))
    max(clamp(12px, 3.5vw, 34px), env(safe-area-inset-right))
    max(clamp(12px, 2.5vh, 32px), env(safe-area-inset-bottom))
    max(clamp(12px, 3.5vw, 34px), env(safe-area-inset-left));
}

/* 종이 그레인 오버레이 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* ---------- 시트(초대장 카드) ---------- */
.app {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  margin: auto;
  /* 모든 화면에서 카드(배경) 크기 통일 — 콘텐츠는 세로 가운데 정렬 */
  min-height: min(720px, calc(100dvh - 24px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(26px, 6vw, 46px) clamp(22px, 5.5vw, 40px);
  background:
    linear-gradient(180deg, var(--paper-hi), var(--paper-2));
  border: 1px solid var(--line-2);
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 30px 60px -30px rgba(60, 40, 24, 0.35),
    0 2px 8px rgba(60, 40, 24, 0.08);
}
/* 렌더되는 각 화면(섹션)이 카드 안에서 세로 가운데를 차지 */
.app > section { width: 100%; }
.app::before { /* 이중 괘선 프레임 */
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid var(--line);
  border-radius: 2px;
  pointer-events: none;
}

/* ---------- 공통 조판 ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terra);
  white-space: nowrap;
}
.eyebrow .rule {
  flex: 1;
  max-width: 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}
.eyebrow--year {
  justify-content: center;
  gap: 0;
  color: var(--ink-faint);
  letter-spacing: 0.42em;
  font-size: 0.66rem;
  margin-top: 8px;
}

.display {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2rem, 8.5vw, 2.85rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--ink);
  word-break: keep-all;      /* 한글은 단어(어절) 단위로만 줄바꿈 */
  overflow-wrap: break-word;
}
.display--sm { font-size: clamp(1.7rem, 6.5vw, 2.2rem); }

.script {
  font-family: var(--hand);
  font-size: clamp(1.45rem, 5.6vw, 1.75rem);
  line-height: 1.5;
  color: var(--terra-2);
}

.lede {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

.rule--full {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent);
}

/* ---------- 왁스 실 ---------- */
.seal {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  transform: rotate(-7deg);
  background:
    radial-gradient(circle at 36% 30%, #cf6045 0%, #b6462d 46%, #8f3320 100%);
  box-shadow:
    inset 0 3px 7px rgba(255,220,205,0.4),
    inset 0 -8px 14px rgba(80,20,10,0.4),
    0 10px 20px -6px rgba(130,40,25,0.5);
}
.seal__ring {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 1px dashed rgba(255,235,222,0.55);
}
.seal .heart {
  width: 30px;
  fill: #f6ddcf;
  filter: drop-shadow(0 1px 1px rgba(80,20,10,0.4));
}

/* ---------- 사진 오프닝 (한 장씩 크게 넘겨보기) ---------- */
.opening {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.opening__stack {
  position: relative;
  width: 100%;
  height: clamp(330px, 58vh, 460px);
  margin-bottom: 10px;
}
.rf-shot {
  position: absolute;
  top: 50%; left: 50%;
  width: min(76%, 292px);
  margin: 0;
  padding: 10px 10px 30px;
  background: #fffdf8;
  border: 1px solid rgba(44, 35, 28, 0.08);
  box-shadow: 0 18px 36px -12px rgba(60, 40, 24, 0.5);
  transform: translate(-50%, -50%) rotate(var(--r));
  animation: flipIn 0.6s cubic-bezier(.2, .75, .2, 1) both;
  animation-delay: var(--d);
}
.rf-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #e9e0d2;
}
@keyframes flipIn {
  from {
    opacity: 0;
    transform: translate(-50%, -66%) rotate(calc(var(--r) - 11deg)) scale(1.14);
  }
  55% { opacity: 1; }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--r)) scale(1);
  }
}
.opening__cap {
  margin-top: 10px;
  opacity: 0;
  animation: fadeUp 0.9s ease both; /* delay 는 인라인으로 주입 */
}
.opening__skip {
  margin-top: 20px;
  padding: 9px 22px;
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 40px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.opening__skip:hover { color: var(--ink); border-color: var(--ink-soft); }
.opening__cap, .opening__skip { position: relative; z-index: 5; }

/* 배경에 떠오르는 하트 */
.hearts {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.fh {
  position: absolute;
  bottom: -8%;
  width: calc(20px * var(--s));
  opacity: 0;
  color: var(--rose);
  animation: floatHeart var(--dur) ease-in var(--delay) infinite;
}
.fh:nth-child(3n)   { color: var(--terra); }
.fh:nth-child(3n+1) { color: var(--gold); }
.fh .heart { display: block; width: 100%; height: auto; fill: currentColor; }
@keyframes floatHeart {
  0%   { opacity: 0;    transform: translateY(0) scale(0.7) rotate(-8deg); }
  12%  { opacity: 0.8; }
  70%  { opacity: 0.55; }
  100% { opacity: 0;    transform: translateY(-58vh) scale(1.05) rotate(8deg); }
}
.cap-heart {
  display: inline-block;
  width: 20px;
  margin-left: 8px;
  vertical-align: -2px;
  color: var(--terra);
  animation: heartBeat 1.1s ease-in-out infinite;
}
.cap-heart .heart { display: block; width: 100%; fill: currentColor; }
@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  25%      { transform: scale(1.24); }
  40%      { transform: scale(1); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 인트로 ---------- */
.intro { text-align: center; }
.intro .seal { margin: 4px auto 22px; }
.intro .eyebrow { margin-bottom: 4px; }
.intro .display { margin: 22px 0 20px; }
.intro .script { margin-bottom: 10px; }
.intro .lede { margin-bottom: 34px; }

/* ---------- 버튼 ---------- */
.btn {
  position: relative;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: none;
  background: none;
  transition: transform 0.16s ease;
}
.btn span { position: relative; z-index: 1; }
.btn--primary {
  padding: 15px 40px;
  color: var(--paper-hi);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--terra) 0%, var(--terra-2) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 10px 22px -10px rgba(150,45,30,0.7);
}
.btn--primary::after { /* 눌린 괘선 테두리 */
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,236,225,0.4);
  border-radius: 1px;
}
.btn--primary:hover { transform: translateY(-2px); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  padding: 11px 24px;
  color: var(--ink-soft);
  border: 1px solid var(--line-2);
  border-radius: 40px;
  background: transparent;
}
.btn--ghost:hover { color: var(--ink); border-color: var(--ink-soft); }

/* ---------- 문항 ---------- */
.q__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.q__num {
  font-family: var(--display);
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
}
.q__num b { font-weight: 600; font-size: 1.85rem; line-height: 1; }
.q__num span { color: var(--ink-faint); font-size: 0.9rem; letter-spacing: 0.05em; }
.q__dots { display: flex; gap: 7px; }
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.dot.is-done { background: var(--gold); border-color: var(--gold); }
.dot.is-now  { background: var(--terra); border-color: var(--terra); transform: scale(1.25); }

.q__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.35rem, 5.3vw, 1.7rem);
  line-height: 1.55;
  letter-spacing: -0.01em;
  margin: 26px 0 0;
}
.q__hint {
  font-family: var(--hand);
  font-size: 1.25rem;
  color: var(--rose);
  margin-top: 10px;
  line-height: 1.4;
}

.opts { list-style: none; margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.opt {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  background: var(--paper-hi);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.04rem;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.22s, background 0.22s, transform 0.12s, box-shadow 0.22s;
}
.opt:hover {
  border-color: var(--rose);
  transform: translateX(3px);
  box-shadow: -3px 0 0 0 var(--rose);
}
.opt__box {
  flex: none;
  position: relative;
  width: 20px; height: 20px;
  border: 1.5px solid var(--ink-faint);
  border-radius: 3px;
  transition: border-color 0.2s, background 0.2s;
}
.opt.is-on {
  border-color: var(--terra);
  background: linear-gradient(180deg, rgba(182,70,45,0.09), rgba(182,70,45,0.03));
}
.opt.is-on .opt__box {
  border-color: var(--terra);
  background: var(--terra);
}
.opt.is-on .opt__box::after { /* 도장 체크 */
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid var(--paper-hi);
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}
.opt__label { flex: 1; }

.q__nav { margin-top: 28px; min-height: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.btn--home { color: var(--ink-faint); border-color: var(--line); }

/* ---------- 두구두구 (서스펜스) ---------- */
.suspense { text-align: center; padding: 14px 0; }
.suspense .seal {
  width: 92px; height: 92px;
  margin: 6px auto 30px;
  animation: sealBounce 0.62s ease-in-out infinite;
}
.suspense .seal .heart { width: 36px; }
.suspense .display { margin-bottom: 22px; }
.drumroll {
  display: inline-flex;
  align-items: baseline;
  letter-spacing: 0.04em;
}
.drumroll .dots { display: inline-flex; }
.drumroll .dots i {
  font-style: normal;
  animation: blink 1.05s infinite both;
}
.drumroll .dots i:nth-child(2) { animation-delay: 0.18s; }
.drumroll .dots i:nth-child(3) { animation-delay: 0.36s; }
.suspense__bar {
  height: 2px;
  max-width: 200px;
  margin: 30px auto 0;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.suspense__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--rose), var(--terra));
  animation: fillbar 2.8s linear forwards;
}
@keyframes sealBounce {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50%      { transform: rotate(-3deg) translateY(-9px); }
}
@keyframes blink {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 1; }
}
@keyframes fillbar { to { width: 100%; } }

/* 잭팟(S급) 골드 연출 — 피파 특별카드 뽑기 느낌 */
.suspense--gold { position: relative; overflow: hidden; }
.suspense--gold .seal,
.suspense--gold .display,
.suspense--gold .drumroll { position: relative; z-index: 2; }
.suspense--gold .seal {
  width: 110px; height: 110px;
  margin: 4px auto 30px;
  background: radial-gradient(circle at 36% 30%, #f6e2a4 0%, #d8b463 48%, #a9823f 100%);
  box-shadow:
    0 0 48px rgba(212, 175, 90, 0.9),
    inset 0 3px 8px rgba(255, 244, 214, 0.65),
    inset 0 -9px 16px rgba(150, 110, 40, 0.45);
  animation: sealBounce 0.5s ease-in-out infinite;
}
.suspense--gold .seal .heart { fill: #fff7e2; width: 42px; }
.rays {
  position: absolute; top: 33%; left: 50%;
  width: 160vmax; height: 160vmax;
  transform: translate(-50%, -50%);
  z-index: 0;
  opacity: 0;
  background: repeating-conic-gradient(from 0deg,
    rgba(212, 175, 90, 0) 0deg, rgba(212, 175, 90, 0.20) 5deg, rgba(212, 175, 90, 0) 10deg);
  animation: spin 7s linear infinite, raysIn 4.2s ease forwards;
}
.glow {
  position: absolute; top: 33%; left: 50%;
  width: 140px; height: 140px; border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background: radial-gradient(circle, rgba(214, 176, 92, 0.62), rgba(214, 176, 92, 0) 70%);
  filter: blur(6px);
  animation: glowPulse 4.2s ease forwards;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes raysIn { 0% { opacity: 0; } 45% { opacity: 0.55; } 100% { opacity: 0.9; } }
@keyframes glowPulse {
  0%   { opacity: 0.15; width: 120px; height: 120px; }
  70%  { opacity: 0.85; width: 340px; height: 340px; }
  100% { opacity: 1;    width: 440px; height: 440px; }
}
.spark {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #f8ecc2;
  box-shadow: 0 0 9px 2px rgba(248, 236, 194, 0.95);
  opacity: 0; z-index: 2;
}
.spark--1 { top: 20%; left: 22%; animation: twinkle 1.4s ease-in-out 0.6s infinite; }
.spark--2 { top: 28%; left: 78%; animation: twinkle 1.6s ease-in-out 1.0s infinite; }
.spark--3 { top: 54%; left: 15%; animation: twinkle 1.3s ease-in-out 1.4s infinite; }
.spark--4 { top: 60%; left: 83%; animation: twinkle 1.5s ease-in-out 0.9s infinite; }
.spark--5 { top: 14%; left: 55%; animation: twinkle 1.7s ease-in-out 1.7s infinite; }
.spark--6 { top: 46%; left: 64%; animation: twinkle 1.4s ease-in-out 2.0s infinite; }
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50%      { opacity: 1; transform: scale(1); }
}

/* ---------- 결과 ---------- */
.result { text-align: center; }
.result .display { margin: 16px 0 30px; }
.tags { list-style: none; display: flex; flex-direction: column; gap: 16px; text-align: left; }
.tag {
  position: relative;
  padding: 24px 24px 26px;
  background: var(--paper-hi);
  border: 1px solid var(--line);
  border-radius: 4px 4px 14px 14px;
  box-shadow: 0 8px 20px -14px rgba(60,40,24,0.4);
}
.tag__hole { /* 선물 태그 구멍 */
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 2px rgba(60,40,24,0.25);
}
.tag--hero {
  border-color: rgba(182,70,45,0.4);
  background:
    linear-gradient(180deg, rgba(182,70,45,0.08), rgba(248,241,228,0) 60%),
    var(--paper-hi);
  box-shadow: 0 14px 30px -16px rgba(150,45,30,0.45);
}
.tag .seal {
  position: absolute;
  top: -22px; right: 20px;
  width: 54px; height: 54px;
  transform: rotate(9deg);
}
.tag .seal .heart { width: 21px; }
.tag__rank {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--rose);
  margin-bottom: 12px;
  padding-top: 6px;
}
.tag--hero .tag__rank { color: var(--terra); }
.tag__name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.28rem;
  line-height: 1.5;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.tag__line {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink-soft);
}
.tag__note {
  margin-top: 12px;
  font-family: var(--hand);
  font-size: 1.15rem;
  color: var(--gold);
}
.tag--jackpot {
  border-color: rgba(169, 130, 63, 0.6);
  background:
    linear-gradient(180deg, rgba(169, 130, 63, 0.18), rgba(248, 241, 228, 0) 65%),
    var(--paper-hi);
  box-shadow: 0 0 0 1px rgba(169, 130, 63, 0.3), 0 16px 34px -16px rgba(169, 130, 63, 0.6);
}
.tag--jackpot .tag__rank { color: var(--gold); }
.result__closing { margin: 26px 0 0; }
.result .tags { margin-bottom: 4px; }
.result .btn--ghost { margin-top: 28px; }

/* ---------- motion ---------- */
.reveal { animation: rise 0.7s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0s); }
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- 모바일 최적화 ---------- */
@media (max-width: 480px) {
  body { padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .app { padding: 26px 20px; }
  .app::before { inset: 7px; }
  .display { font-size: clamp(1.85rem, 8.4vw, 2.35rem); line-height: 1.3; }
  .display--sm { font-size: clamp(1.6rem, 6.6vw, 2rem); }
  .intro .display { margin: 18px 0 16px; }
  .intro .seal { margin: 2px auto 18px; }
  .intro .lede { margin-bottom: 28px; }
  .q__title { font-size: clamp(1.3rem, 5.4vw, 1.6rem); }
  .opts { margin-top: 22px; }
  .opt { padding: 15px 16px; font-size: 1rem; }
  .tag { padding: 22px 20px 24px; }
  .tag__name { font-size: 1.2rem; }
  .rf-shot { width: min(84%, 262px); padding: 9px 9px 26px; }
  .opening__stack { height: clamp(290px, 50vh, 400px); }
  .opening__skip { padding: 12px 26px; }
  .btn--primary { padding: 15px 44px; }
}

/* 아주 좁은 화면(≤360px) */
@media (max-width: 360px) {
  .app { padding: 24px 17px; }
  .eyebrow { letter-spacing: 0.14em; font-size: 0.66rem; }
  .display { font-size: clamp(1.5rem, 7.6vw, 1.85rem); line-height: 1.34; }
  .display--sm { font-size: clamp(1.45rem, 6.2vw, 1.75rem); }
  .q__title { font-size: clamp(1.22rem, 5.2vw, 1.5rem); }
  .opt { font-size: 0.98rem; padding: 14px 15px; }
  .rf-shot { width: min(88%, 240px); }
}