/* ════════════════════════════════════════════════════════════════
   Wolha — overrides on top of yeon.css + halmae.css
   pink/rose dominant (인연·애정 테마)
   ════════════════════════════════════════════════════════════════ */

/* ─── Promo bar ─── */
.promo-bar-wolha {
  background: linear-gradient(90deg, #831843 0%, #be185d 50%, #9d174d 100%);
}
.promo-bar-wolha .pb-icon { color: #fce7f3; }
.promo-bar-wolha .pb-msg strong { color: #fce7f3; }
.promo-bar-wolha .pb-timer {
  background: rgba(0,0,0,0.5);
  color: #fce7f3;
}

/* ─── Kicker pink ─── */
.kicker-pink { color: var(--pink-l) !important; }

/* ─── Hero tag pink 강조 ─── */
.yt-pink {
  background: linear-gradient(135deg, var(--pink-l), var(--pink));
  color: white;
}

/* ─── Gradient pink ─── */
.grad-y-pink {
  background: linear-gradient(135deg, #fce7f3 0%, #f472b6 30%, #ec4899 60%, #be185d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ─── ys-i pink soft ─── */
.bg-pink-soft { background: var(--pink-bg); color: var(--pink-l); }

/* ─── Hero — pink dominant ─── */
.wolha-hero {
  background: linear-gradient(180deg, #2a0a1f 0%, #15041a 70%, var(--bg-1) 100%);
}
.wolha-hero .yh-bg {
  background:
    radial-gradient(ellipse 60% 40% at 30% 30%, rgba(236, 72, 153, 0.22), transparent 60%),
    radial-gradient(ellipse 50% 30% at 80% 60%, rgba(244, 114, 182, 0.18), transparent 60%),
    radial-gradient(ellipse 40% 20% at 50% 80%, rgba(252, 231, 243, 0.05), transparent 60%);
}

/* Mini stats pink */
.yh-mini-stats-pink strong {
  color: var(--pink-l);
}
.yh-live-pink {
  background: rgba(236, 72, 153, 0.12);
  border-color: rgba(236, 72, 153, 0.3);
  color: var(--pink-l);
}
.yh-live-pink strong { color: white; }

.yh-cta-pink {
  background: linear-gradient(135deg, var(--pink), var(--pink-d));
  color: white;
  box-shadow: 0 12px 32px rgba(236, 72, 153, 0.45);
}
.yh-cta-pink:hover {
  box-shadow: 0 16px 40px rgba(236, 72, 153, 0.6);
}

/* ─── Wolha 카드 — 핑크/마젠타 톤 ─── */
.wolha-card {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(244, 114, 182, 0.45), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(131, 24, 67, 0.7), transparent 70%),
    linear-gradient(180deg, #3a0820 0%, #1a0410 100%);
  border-color: rgba(244, 114, 182, 0.45);
}
.wolha-card .yc-img::after {
  background: linear-gradient(180deg, transparent 35%, rgba(58, 8, 32, 0.92));
}
.yc-live-pink {
  background: rgba(236, 72, 153, 0.4);
  border-color: var(--pink-l);
  color: white;
}
.wolha-card .ycs-num {
  color: var(--pink-l);
}
.wolha-card .yc-tag {
  color: var(--pink-l);
}

/* ─── Wolha quote — 보름달 일러스트 ─── */
.wolha-quote {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(236, 72, 153, 0.25), transparent 60%),
    linear-gradient(180deg, #1a0a25 0%, #08020c 100%);
  border-color: rgba(236, 72, 153, 0.3);
}
.wolha-quote .wq-illust {
  position: relative;
  height: 220px;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, #08020c 0%, #1a0a1f 50%, #08020c 100%);
}
.wq-stars-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, white, transparent),
    radial-gradient(1px 1px at 50% 60%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 80% 20%, white, transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 70% 70%, white, transparent),
    radial-gradient(1px 1px at 15% 50%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 90% 50%, white, transparent),
    radial-gradient(1px 1px at 40% 15%, rgba(255, 255, 255, 0.7), transparent);
  opacity: 0.85;
  animation: starTwinkle 4s ease-in-out infinite;
}
@keyframes starTwinkle {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.55; }
}
.wq-moon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #fef9f3 0%, #f5e6d3 30%, #d4b59a 60%, #8a7560 90%);
  box-shadow:
    0 0 30px rgba(244, 114, 182, 0.4),
    0 0 60px rgba(236, 72, 153, 0.25),
    inset -8px -8px 20px rgba(0,0,0,0.3);
  z-index: 2;
}
.wq-moon::before {
  /* 분화구 */
  content: '';
  position: absolute;
  top: 30%; left: 30%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(0,0,0,0.12);
  box-shadow:
    18px 8px 0 -3px rgba(0,0,0,0.1),
    -8px 25px 0 -2px rgba(0,0,0,0.08),
    25px 30px 0 -4px rgba(0,0,0,0.1);
}
.wq-clouds {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30%;
  background:
    radial-gradient(ellipse at 30% 100%, rgba(131, 24, 67, 0.3), transparent 60%),
    radial-gradient(ellipse at 70% 100%, rgba(58, 8, 32, 0.4), transparent 60%);
  filter: blur(3px);
}

.wq-label-pink {
  color: var(--pink-l) !important;
}
.wolha-quote blockquote {
  color: white;
}

/* WHO 4박스 — pink */
.who-item-pink .wi-icon {
  background: var(--pink-bg);
  color: var(--pink-l);
}
.who-item-pink h4 {
  color: var(--pink-l);
}

/* ─── 6개 included 일러스트 ─── */
.will-01 { background: radial-gradient(circle at 30% 30%, #fbcfe8 0%, #ec4899 30%, #831843 70%, #2a0a1f 100%); }
.will-02 { background: radial-gradient(circle at 50% 30%, #c4b5fd 0%, #a855f7 30%, #581c87 70%, #1a0a3a 100%); }
.will-03 { background: radial-gradient(circle at 50% 50%, #fce7f3 0%, #f472b6 30%, #be185d 70%, #2a0a1f 100%); }
.will-04 { background: radial-gradient(circle at 50% 50%, #c4b5fd 0%, #c084fc 30%, #6b21a8 70%, #1a0a3a 100%); }
.will-05 { background: radial-gradient(circle at 50% 50%, #fca5a5 0%, #ec4899 30%, #831843 70%, #2a0808 100%); }
.will-06 { background: radial-gradient(circle at 50% 30%, #fef9c3 0%, #c084fc 30%, #4c1d95 70%, #1a0a3a 100%); }

/* ─── Tags 추가 (red) ─── */
.tag-red {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

/* ─── TRANSFORMATION pink ─── */
.tf-after-pink {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(236, 72, 153, 0.12), transparent 60%),
    var(--bg-3);
  border-color: rgba(236, 72, 153, 0.35);
}
.tf-icon-pink {
  background: rgba(236, 72, 153, 0.2);
  color: var(--pink-l);
  border: 1px solid rgba(236, 72, 153, 0.4);
}
.tf-after-pink .tf-head h3 {
  color: var(--pink-l);
}
.tf-after-pink .tf-list li em {
  background: rgba(236, 72, 153, 0.18);
  color: var(--pink-l);
}
.tf-v-pink {
  color: var(--pink-l) !important;
}

/* ─── PR pink ─── */
.pr-pink {
  border-color: rgba(236, 72, 153, 0.4);
  background: linear-gradient(180deg, rgba(236, 72, 153, 0.06), var(--bg-3));
}
.pr-band-pink {
  background: linear-gradient(135deg, var(--pink), var(--pink-d));
  color: white;
}
.pr-pink .pr-name { color: white; }
.pr-pink .pr-tier { color: var(--pink-l); }
.pr-cta-pink {
  background: linear-gradient(135deg, var(--pink), var(--pink-d));
  color: white;
}

/* ════════════════════════════════════════════════════════════════
   GUARANTEE BOX (PRICING 섹션 하단)
   ════════════════════════════════════════════════════════════════ */
.guarantee-box {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
  align-items: center;
  margin-top: 28px;
  padding: 18px 24px;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 14px;
}
.gb-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 12px;
  font-size: 20px;
  color: var(--green-l);
}
.gb-body h4 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  color: white;
}
.gb-body p {
  font-size: 12px;
  color: var(--t2);
  line-height: 1.6;
}
.gb-tags {
  display: flex;
  gap: 14px;
  flex-shrink: 0;
}
.gb-tags span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--t2);
  font-weight: 600;
}

@media (max-width: 700px) {
  .guarantee-box {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .gb-icon { margin: 0 auto; }
  .gb-tags { justify-content: center; flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════════════
   ORDER FORM 추가 요소
   ════════════════════════════════════════════════════════════════ */
.of-notice {
  margin-bottom: 14px;
  text-align: center;
}
.of-notice-tag {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(236, 72, 153, 0.12);
  border: 1px solid rgba(236, 72, 153, 0.3);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pink-l);
}
.of-pre-trust {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--t3);
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.of-pre-trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ─── ORDER pink overrides ─── */
.order-form-pink .of-field input:focus,
.order-form-pink .of-field textarea:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15);
}
.of-toggle-pink .ot.active {
  background: rgba(236, 72, 153, 0.18);
  border-color: var(--pink);
}
.of-submit-pink {
  background: linear-gradient(135deg, var(--pink), var(--pink-d)) !important;
  color: white !important;
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.4) !important;
}

/* ─── FAQ pink ─── */
.faq-list-pink .faq[open] {
  border-color: rgba(236, 72, 153, 0.35);
}
.faq-list-pink .faq-i {
  color: var(--pink-l);
}

/* ─── Final CTA pink ─── */
.final-cta-pink {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(236, 72, 153, 0.3), transparent 60%),
    linear-gradient(135deg, #2a0a1f 0%, #15041a 100%);
  border-color: rgba(236, 72, 153, 0.35);
}
.fc-btn-pink {
  background: linear-gradient(135deg, var(--pink), var(--pink-d));
  color: white;
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.4);
}
.fc-guarantee {
  margin-top: 14px;
  font-size: 12px;
  color: var(--green-l);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}