/* ============================================
   위고페이 — Components (버튼, 카드, 폰 목업, 채팅)
   로드 순서: 4/5
   의존: variables.css (토큰)
   참고: phone-mockup, chat-bubble → 히어로 채팅 애니메이션에 사용 (🔒 LOCKED)
   ============================================ */

/* ── Animations ── */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6} }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes chatBubble { from{opacity:0;transform:translateY(12px) scale(.95)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes typing { 0%,80%,100%{transform:scale(.6);opacity:.4} 40%{transform:scale(1);opacity:1} }

.fade-up{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.fade-up.active{opacity:1;transform:translateY(0)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:var(--radius-full);font-size:var(--fs-base);font-weight:var(--fw-bold);transition:all .25s ease;text-decoration:none;border:none;cursor:pointer;font-family:inherit}
.btn--primary{background:var(--color-primary);color:#fff;box-shadow:0 4px 16px rgba(77,163,255,.3)}
.btn--primary:hover{background:var(--color-primary-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(77,163,255,.4)}
.btn--kakao{background:#FEE500;color:#3C1E1E;box-shadow:0 4px 16px rgba(254,229,0,.3)}
.btn--kakao:hover{background:#F5DC00;transform:translateY(-2px);box-shadow:0 8px 24px rgba(254,229,0,.4)}
.btn--outline{background:transparent;color:var(--color-primary);border:2px solid var(--color-primary);transition:all .3s cubic-bezier(.34,1.56,.64,1)}
.btn--outline:hover{background:var(--color-primary);color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(77,163,255,.25)}
.btn--lg{padding:16px 32px;font-size:var(--fs-md)}
.btn--sm{padding:10px 20px;font-size:var(--fs-sm)}
.btn--disabled{opacity:.45;pointer-events:none;cursor:not-allowed;filter:grayscale(.3)}
.btn--disabled:hover{transform:none;box-shadow:none}
.btn img,.btn svg{width:20px;height:20px}
.btn__icon-img{width:20px;height:20px;object-fit:contain}
.floating__kakao-icon{width:18px;height:18px;object-fit:contain}

/* ══════ PHONE MOCKUP ══════ */
.phone-mockup{width:300px;background:#fff;border-radius:32px;box-shadow:var(--shadow-xl),0 0 0 1px rgba(0,0,0,.04);overflow:hidden;animation:float 4s ease-in-out infinite}
.phone-mockup__notch{width:120px;height:24px;background:var(--color-accent);border-radius:0 0 16px 16px;margin:0 auto}
.phone-mockup__header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--color-border)}
.phone-mockup__avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}
.phone-mockup__name{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--color-text)}
.phone-mockup__status{font-size:var(--fs-xs);color:var(--color-success);margin-left:auto}
.phone-mockup__chat{min-height:320px;padding:16px;display:flex;flex-direction:column;gap:10px;background:#F8FAFC;overflow:hidden}
.phone-mockup__input{padding:12px 16px;border-top:1px solid var(--color-border);font-size:var(--fs-sm);color:var(--color-text-light)}
@media(max-width:768px){.phone-mockup{width:260px}.phone-mockup__chat{min-height:260px}}

/* ── Chat Bubbles ── */
.chat-bubble{max-width:85%;padding:10px 14px;border-radius:16px;font-size:var(--fs-sm);line-height:1.5;animation:chatBubble .4s ease forwards;opacity:0}
.chat-bubble--bot{align-self:flex-start;background:var(--color-surface);color:var(--color-text);border-bottom-left-radius:4px;box-shadow:var(--shadow-sm)}
.chat-bubble--user{align-self:flex-end;background:var(--color-primary);color:#fff;border-bottom-right-radius:4px}
.chat-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 16px;background:var(--color-surface);border-radius:16px;border-bottom-left-radius:4px;box-shadow:var(--shadow-sm)}
.chat-typing span{width:6px;height:6px;background:var(--color-text-light);border-radius:50%;animation:typing 1.4s ease-in-out infinite}
.chat-typing span:nth-child(2){animation-delay:.2s}
.chat-typing span:nth-child(3){animation-delay:.4s}

/* ══════ REVIEW CARDS ══════ */
.reviews-slider{position:relative;overflow:hidden}
.reviews-track{display:flex;gap:20px;transition:transform .5s ease;will-change:transform}
.review-card{min-width:300px;flex-shrink:0;background:var(--color-surface);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);border:1px solid var(--color-border);transition:all .3s cubic-bezier(.34,1.56,.64,1)}
.review-card:hover{box-shadow:0 8px 32px rgba(77,163,255,.12);transform:translateY(-4px);border-color:rgba(77,163,255,.2)}
.review-card__header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.review-card__avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.review-card__name{font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.review-card__date{font-size:var(--fs-xs);color:var(--color-text-light)}
.review-card__stars{color:#FBBF24;font-size:var(--fs-sm);margin-bottom:8px}
.review-card__text{font-size:var(--fs-sm);color:var(--color-text-light);line-height:1.6}
@media(max-width:768px){.review-card{min-width:260px}}

/* ══════ FAQ ══════ */
.faq__list{max-width:800px;margin:0 auto}
.faq__item{background:var(--color-surface);border-radius:var(--radius-md);margin-bottom:12px;box-shadow:var(--shadow-sm);overflow:hidden;border:1px solid var(--color-border)}
.faq__question{width:100%;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-base);font-weight:var(--fw-semibold);text-align:left;transition:color .2s}
.faq__question:hover{color:var(--color-primary)}
.faq__question i{transition:transform .3s;font-size:var(--fs-sm);color:var(--color-text-light)}
.faq__item.open .faq__question i{transform:rotate(180deg)}
.faq__answer{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq__item.open .faq__answer{max-height:500px}
.faq__answer-inner{padding:0 20px 18px;font-size:var(--fs-sm);color:var(--color-text-light);line-height:1.8}

/* ══════ SECTION TITLES ══════ */
.section__title{font-size:var(--fs-xl);font-weight:var(--fw-extrabold);text-align:center;margin-bottom:12px}
.section__subtitle{font-size:var(--fs-base);color:var(--color-text-light);text-align:center;margin-bottom:40px}
@media(min-width:769px){.section__title{font-size:var(--fs-2xl)}.section__subtitle{font-size:var(--fs-md)}}