:root {
  --brand: #7A00F5;
  --brand-light: #9433f7;
  --plum: #3B0F4D;
  --lavender: #E6D5FF;
  --apricot: #FFB279;
  --cream: #f8f2ff;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Noto Sans KR', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: #FFFDFF;
  color: #3B0F4D;
  word-break: keep-all;
}

.btn-brand {
  background-color: var(--brand);
}
.btn-brand:hover {
  background-color: var(--brand-light);
}

.btn-cta {
  background-color: var(--brand);
}
.btn-cta:hover {
  background-color: var(--brand-light);
}

.btn-accent {
  background-color: var(--apricot);
}
.btn-accent:hover {
  background-color: #ffa05c;
}

.hl {
  display: inline-block;
  color: var(--brand);
  background-image: linear-gradient(transparent 82%, var(--apricot) 82%, var(--apricot) 90%, transparent 90%);
}

.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(122, 0, 245, 0.2);
}

.mobile-menu {
  transition: max-height 0.25s ease;
}

.hero {
  background-color: #f8f3fe;
}
.hero-img {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, transparent 0, #000 15%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, transparent 0, #000 15%);
  mask-composite: intersect;
}