html, body { font-family: 'Pretendard', 'Outfit', system-ui, sans-serif; }
body { background: #FFFFFF; color: #0A0A0A; -webkit-font-smoothing: antialiased; }

.kr { word-break: keep-all; }
.tnum { font-variant-numeric: tabular-nums; }

.ease-supanova { transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(1.5rem); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.reveal { opacity: 0; }
.reveal.in { animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
.reveal.in.d1 { animation-delay: 80ms; }
.reveal.in.d2 { animation-delay: 160ms; }
.reveal.in.d3 { animation-delay: 240ms; }
.reveal.in.d4 { animation-delay: 320ms; }
.reveal.in.d5 { animation-delay: 400ms; }

@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}
.float-slow { animation: float 7s ease-in-out infinite; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee { animation: marquee 40s linear infinite; }

.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.03;
  mix-blend-mode: multiply;
}

.double-bezel {
  background: rgba(0,0,0,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.double-bezel-inner {
  background: #FFFFFF;
  box-shadow: 0 1px 1px rgba(255,255,255,0.6) inset, 0 30px 60px -25px rgba(10,10,10,0.10);
}

.gold-divider {
  background: linear-gradient(90deg, transparent 0%, #10B981 50%, transparent 100%);
  height: 1px;
}

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
details[open] .accordion-content { max-height: 600px; }

.seg-active {
  background: #0A0A0A;
  color: #FFFFFF;
}

[data-case="discount"]    .case-label::before { content: "할인 적용"; }
[data-case="ads-split"]   .case-label::before { content: "광고비 분배"; }
[data-case="refund"]      .case-label::before { content: "환불 발생"; }

.scroll-trigger {
  scroll-snap-type: x mandatory;
}

.pill-btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.5rem 1rem 2rem;
  border-radius: 9999px;
  font-weight: 600;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.pill-btn .arrow {
  width: 2rem; height: 2rem; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.pill-btn:hover { transform: scale(1.02); }
.pill-btn:active { transform: scale(0.98); }
.pill-btn:hover .arrow { transform: translateX(0.25rem); }

.btn-primary { background: #0A0A0A; color: #FFFFFF; }
.btn-primary .arrow { background: #10B981; color: #0A0A0A; }
.btn-primary:hover { background: #1F1F1F; }

.btn-secondary { background: transparent; color: #0A0A0A; border: 1px solid rgba(0,0,0,0.10); }
.btn-secondary .arrow { background: rgba(0,0,0,0.05); color: #0A0A0A; }
.btn-secondary:hover { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.18); }

.btn-on-dark { background: #10B981; color: #0A0A0A; }
.btn-on-dark .arrow { background: #0A0A0A; color: #10B981; }
.btn-on-dark:hover { background: #34D399; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500;
  background: #ECFDF5; color: #047857;
}
.eyebrow.dark { background: rgba(16,185,129,0.15); color: #34D399; }
</content>
</invoke>