html { scroll-behavior: smooth; scroll-padding-top: 120px; }

body {
  font-family: 'Gowun Batang', 'Noto Serif KR', serif;
  background: #FFF8F0;
  color: #2D1F16;
}

.grain {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,218,185,0.35), transparent 40%),
    radial-gradient(circle at 80% 10%, rgba(255,200,160,0.28), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(255,235,220,0.4), transparent 50%);
}

.hand { font-family: 'Nanum Pen Script', cursive; }
.display { font-family: 'Playfair Display', serif; }

.paper {
  background:
    repeating-linear-gradient(180deg, transparent, transparent 31px, rgba(92,58,40,0.08) 31px, rgba(92,58,40,0.08) 32px),
    #FFFBF5;
}

.quote-card {
  background: linear-gradient(135deg, #FFE4D1 0%, #FFDAB9 100%);
}

.sun {
  background: radial-gradient(circle at 30% 30%, #FFD27F 0%, #FFA86B 60%, #FF8C69 100%);
}

.underline-wave {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0,5 Q25,0 50,5 T100,5' fill='none' stroke='%23FF8C69' stroke-width='2'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 8px;
  background-position: 0 100%;
  padding-bottom: 6px;
}

.tape {
  position: absolute;
  width: 80px; height: 22px;
  background: rgba(255,140,105,0.35);
  border: 1px solid rgba(255,140,105,0.4);
  transform: rotate(-4deg);
  top: -10px; left: 50%;
  margin-left: -40px;
}

.polaroid {
  background: #FFFBF5;
  padding: 14px 14px 42px 14px;
  box-shadow: 0 8px 28px rgba(92,58,40,0.15);
}

.fade-in { animation: fade 0.9s ease-out both; }
@keyframes fade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,140,105,0.12);
  border: 1px solid rgba(255,140,105,0.3);
  color: #8B4A32;
  font-size: 13px;
}

.chip-dark {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: #5C3A28;
  color: #FFE4D1;
  font-size: 12px;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.btn-primary {
  display: inline-block;
  background: #FF8C69; color: #fff;
  padding: 14px 28px; border-radius: 999px;
  font-weight: 700; letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(255,140,105,0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(255,140,105,0.45);
}

.btn-ghost {
  display: inline-block;
  border: 1.5px solid #5C3A28; color: #5C3A28;
  padding: 14px 28px; border-radius: 999px;
  font-weight: 700; background: transparent;
  transition: background 0.2s;
}
.btn-ghost:hover { background: #5C3A28; color: #FFF8F0; }

.btn-outline-light {
  display: inline-block;
  border: 1.5px solid #FFE4D1; color: #FFE4D1;
  padding: 14px 28px; border-radius: 999px;
  font-weight: 700; background: transparent;
  transition: background 0.2s;
}
.btn-outline-light:hover { background: #FFE4D1; color: #5C3A28; }

.num {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
}

/* FAQ details caret */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details > summary > span:last-child { transition: transform 0.2s; }

/* Privacy sticker mask overlay (for testimonial screenshots) */
.sticker-mask {
  position: absolute;
  pointer-events: none;
  padding: 2px;
}

/* Mouse sparkle effect */
.sparkle {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  z-index: 9999;
  transform: translate(-50%, -50%);
  animation: sparkle-fade 700ms ease-out forwards;
  mix-blend-mode: normal;
  filter: blur(0.3px);
}

.sparkle.burst {
  animation: sparkle-burst 900ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.sparkle.star {
  background: none !important;
  color: #FF8C69;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  filter: drop-shadow(0 0 4px rgba(255,140,105,0.5));
}

@keyframes sparkle-fade {
  0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(0.2) rotate(120deg); }
}

@keyframes sparkle-burst {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1.3) rotate(180deg);
  }
}

@media (hover: none) {
  .sparkle { display: none; }
}