/* Design v800 — one mascot, changing outfits and expressions */
:root{
  --v8-ink:#14234c;
  --v8-line:#d8e2f4;
  --v8-blue:#4d76ff;
  --v8-violet:#7659e8;
  --v8-coral:#ff806f;
}

/* The same robot introduces every section. */
.hero-visual img,.program-card .thumb>img,.product-art>img,.faq-visual img{
  filter:saturate(1.04) contrast(1.015);
}
.hero-visual img{animation:v8HeroFloat 5.2s ease-in-out infinite}

.robot-speech span,.card-speech,.product-speech,.faq-visual::after{
  border-color:rgba(203,215,239,.95);
  color:var(--v8-ink);
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);
}

/* Comic punctuation explains the robot's changing mood. */
.card-speech{padding-left:38px;overflow:visible}
.card-speech::before{
  content:"!";position:absolute;left:-11px;top:-17px;width:38px;height:38px;display:grid;place-items:center;
  border:3px solid #fff;border-radius:13px;background:linear-gradient(145deg,var(--v8-blue),var(--v8-violet));
  color:#fff;font-size:23px;font-weight:1000;box-shadow:0 9px 20px rgba(55,76,167,.25);
  transform:rotate(-7deg);animation:v8Punctuation 2.2s ease-in-out infinite;
}
.program-card.visual-1 .card-speech::before{content:"?";background:linear-gradient(145deg,#7859ed,#a05fe5)}
.program-card.visual-2 .card-speech::before{content:"!";background:linear-gradient(145deg,#ff8b75,#5a79ee)}

.program-card .thumb{overflow:hidden}
.program-card .thumb>img{object-position:center 45%;transform:scale(1.005)}
.program-card:hover .thumb>img{transform:scale(1.055) translateY(-2px)}

.product-speech{padding-left:48px}
.product-speech::before{
  content:"!";position:absolute;left:10px;top:8px;width:28px;height:28px;display:grid;place-items:center;
  border-radius:10px;background:linear-gradient(145deg,var(--v8-blue),var(--v8-violet));color:#fff;font-size:18px;font-weight:1000;
}

/* Replace the older caption with a short character voice. */
.faq-visual::after{
  content:"궁금한 점이 있나요?";right:18px;top:18px;max-width:190px;padding:13px 15px 13px 48px;
}
.faq-visual::before{
  content:"?";position:absolute;z-index:4;right:166px;top:8px;width:38px;height:38px;display:grid;place-items:center;
  border:3px solid #fff;border-radius:13px;background:linear-gradient(145deg,#6d7cf2,#9b6be8);color:#fff;
  font-size:23px;font-weight:1000;box-shadow:0 9px 20px rgba(55,76,167,.24);animation:v8Punctuation 2.4s ease-in-out infinite;
}
.faq-visual img{object-position:center 45%}

@keyframes v8HeroFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(.4deg)}}
@keyframes v8Punctuation{0%,100%{transform:translateY(0) rotate(-7deg) scale(1)}50%{transform:translateY(-5px) rotate(3deg) scale(1.06)}}

@media(max-width:820px){
  .program-card .card-speech{padding-left:35px}
  .card-speech::before{width:34px;height:34px;font-size:20px}
}
@media(max-width:560px){
  .faq-visual::after{right:9px;top:10px;max-width:154px;padding:10px 10px 10px 39px}
  .faq-visual::before{right:133px;top:2px;width:32px;height:32px;font-size:19px}
}
@media(prefers-reduced-motion:reduce){
  .hero-visual img,.card-speech::before,.faq-visual::before{animation:none}
}