/* =========================
   Base
========================= */
:root{
  --bg: #07070d;
  --bg2:#04040a;
  --text:#ffffff;
  --muted: rgba(255,255,255,.70);
  --muted2: rgba(255,255,255,.55);
  --line: rgba(255,255,255,.10);

  --pink:#ff2ea6;
  --pink2:#ff67c4;
  --pinkDark:#2a061b;

  --radius: 18px;
  --radius2: 26px;
  --shadow: 0 22px 80px rgba(0,0,0,.55);
  --max: 1200px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Arial, "Apple SD Gothic Neo", sans-serif;
  background: radial-gradient(900px 600px at 25% 14%, rgba(95,120,255,.28), transparent 55%),
              radial-gradient(900px 600px at 75% 9%, rgba(255,46,166,.28), transparent 60%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
  overflow-x:hidden;
}

a{color:#fff;text-decoration:none}
img{max-width:100%;display:block}

.container{
  width: min(var(--max), calc(100% - 28px));
  margin: 0 auto;
  font-size: 0.825rem;
}

/* =========================
   Header
========================= */
.site-header{
  position: sticky; top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.header-inner{
  height: 60px;
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px;
}
.brand img{height:40px;width:auto}
/* 모바일 기기 (화면 너비가 768px 이하일 때) */
@media (max-width: 768px) {
    .brand img {
        height: 30px;
    }
}

.gnb{
  display:flex; gap:35px;
  font-size:16px;
  color: rgba(255,255,255,.85);
}
.gnb a:hover{color: var(--pink2)}

.header-actions{display:flex; align-items:center; gap:12px}
/* 기본 스타일: 모든 화면에서 보임 */
.header-actions .btn-primary {
    display: inline-block; /* 또는 기존 버튼의 기본 display 값 */
}

/* 모바일 기기 (화면 너비가 768px 이하일 때) */
@media (max-width: 768px) {
    /* 로고 사이즈 조절 */
    .brand img {
        height: 30px;
    }

    /* 로그인 버튼 숨기기 */
    .header-actions .btn-primary {
        display: none;
    }
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 8px 18px 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: #fff;
  font-weight: 600;
  transition: .18s;
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0px) scale(.98)}

.btn-primary{
  border: none;
  background: #e60076;
  /*box-shadow: 0 12px 30px rgba(255,46,166,.25);*/
}
.btn-danger{
  border: none;
  background: #0073e6;
  line-height: 26px;
  /*box-shadow: 0 12px 30px rgba(255,46,166,.25);*/
}
.btn-outline{
  background: transparent;
  border: 1px solid rgba(255,46,166,.45);
}
.btn-sm{padding: 8px 18px 10px 18px; font-size: 13px;}

.icon-btn{
  width: 35px; height: 35px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.40);
  background: rgba(255,255,255,.04);
  color: #fff;
  cursor:pointer;
}
.mobile-only{display:none}

/* =========================
   Hero
========================= */
.section{padding: 60px 0}
.hero{padding-top: 70px}
.hero-top{
  text-align:center;
  padding-top: 48px;
}
.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,46,166,.10);
  border: 1px solid rgba(255,46,166,.25);
  color: rgba(255,255,255,.9);
  font-size: 16px;
}
.badge .tag{
  background: rgba(255,46,166,.35);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}
.hero h1{
  margin: 20px auto 10px;
  max-width: 760px;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.hero h1 .highlight{
  padding: 8px 14px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255,46,166,.95), rgba(255,103,196,.95));
  box-shadow: 0 18px 50px rgba(255,46,166,.28);
}
.hero p{
  margin: 14px auto 0;
  max-width: 600px;
  color: var(--muted);
  line-height: 1.6;
}
.hero-actions{
  margin-top: 26px;
  display:flex; justify-content:center; gap: 12px;
  flex-wrap:wrap;
}
.hero-points{
  margin-top: 26px;
  display:flex; justify-content:center; gap: 20px;
  color: var(--muted2);
  font-size: 13px;
  flex-wrap:wrap;
}
.hero-showcase{
  margin: 48px auto 0;
  max-width: 980px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,46,166,.18);
  overflow:hidden;
  box-shadow: var(--shadow);
}

/* =========================
   Section title
========================= */
.kicker{
  margin: 0 auto;
  width: max-content;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,46,166,.10);
  border: 1px solid rgba(255,46,166,.25);
  color: rgba(255,103,196,.95);
  font-weight: 700;
  font-size: 16px;
}
.section-title{
  margin-top: 14px;
  text-align:center;
  font-size: 30px;
  letter-spacing:-.02em;
}
.section-desc{
  margin: 10px auto 0;
  text-align:center;
  max-width: 880px;
  color: var(--muted);
  line-height: 1.6;
  font-size:1rem;
}

/* =========================
   Cards / Grid
========================= */
.grid-3{
  margin-top: 34px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.card h4{margin: 10px 0 6px; font-size: 16px}
.card p{margin:0; color: var(--muted); line-height: 1.55; font-size: 14px}

/* =========================
   Pricing
========================= */
.pricing-grid{
  margin-top: 38px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.price-card{
  position: relative;
  text-align:center;
  padding: 22px 18px 22px;
  border-radius: var(--radius);
  background: rgba(255,46,166,.06);
  border: 1px solid rgba(255,46,166,.20);
}
.price-card.featured{
  background: rgba(255,46,166,.12);
  border: 1px solid rgba(255,46,166,.35);
  box-shadow: 0 26px 80px rgba(255,46,166,.12);
}
.price-badge{
  position:absolute; top:-12px; left:16px;
  background: rgba(255,103,196,.92);
  color:#1b0010;
  font-weight:800;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
}
.price{
  margin: 10px 0 0;
  font-size: 30px;
  font-weight: 700;
}
.price small{
  font-size: 13px;
  color: rgba(255,255,255,.60);
  font-weight: 500;
}
.list{
  margin: 16px 0 0;
  padding: 0;
  list-style:none;
  color: var(--muted);
  text-align:left;
  display:grid;
  gap: 10px;
}
.list li{
  display:flex; gap:10px; align-items:flex-start;
}
.dot{
  width: 8px; height: 8px;
  margin-top: 3px;
  border-radius: 999px;
  background: #ff70aa;
}

/* =========================
   Contact
========================= */
.form{
  margin: 34px auto 0;
  max-width: 760px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field{display:flex; flex-direction:column; gap:8px}
.input, .textarea{
  width:100%;
  padding: 14px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color:#fff;
  outline:none;
}
.textarea{grid-column: 1 / -1; min-height: 180px; resize: none;}
.form-actions{grid-column: 1 / -1}

/* =========================
   CTA banner
========================= */
.cta-banner{
  margin: 0px auto 0;
  max-width: 980px;
  border-radius: var(--radius2);
  padding: 28px;
  background: linear-gradient(180deg, rgba(255,46,166,.22), rgba(255,46,166,.10));
  border: 1px solid rgba(255,46,166,.25);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}
.cta-banner h3{
  margin:0;
  font-size: 24px;
  letter-spacing:-.02em;
}
.cta-banner p{margin:6px 0 0; color: var(--muted);}

/* =========================
   Footer
========================= */
.site-footer{padding: 64px 0 24px; border-top: 1px solid rgba(255,255,255,.06)}
.footer-inner{
  display:grid;
  grid-template-columns: 1.2fr 1.8fr;
  gap: 26px;
}
.footer-logo{height:34px;width:auto}
.footer-cols{display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px}
.footer-col h4{margin:0 0 12px; font-size: 14px}
.footer-col a{display:block; padding: 6px 0; color: rgba(255,255,255,.65)}
.footer-col a:hover{color: var(--pink2)}
.footer-bottom{margin-top: 20px; border-top: 1px solid rgba(255,255,255,.06); padding-top: 16px}
.muted{color: rgba(255,255,255,.55)}

/* =========================
   Drawer
========================= */
.drawer{position:fixed; inset:0; z-index:100; display:none;}
.drawer.show{display:block;}
.drawer-backdrop{position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(8px);}
.drawer-panel{
  position:absolute; right:0; top:0; height:100%;
  width: min(100%, 100vw);
  background: rgba(10,10,18,.95);
  border-left: 1px solid rgba(255,255,255,.10);
  padding: 18px;
  display:flex; flex-direction:column; gap: 12px;
}
.drawer-close{align-self:flex-end}
.drawer-link{
  padding: 12px 10px;
  border-radius: 12px;
  border: 1px solid rgb(107 107 107);
  background: rgb(0 0 0);
}
.drawer-link:hover{border-color: rgba(255,46,166,.30)}

/* =========================
   Responsive
========================= */
@media (max-width: 980px){
  .grid-3, .pricing-grid{grid-template-columns: 1fr}
  .hero h1{font-size: 26px}
  .gnb{display:none}
  .mobile-only{display:inline-flex}
  .footer-inner{grid-template-columns: 1fr}
  .form{grid-template-columns: 1fr}
}

/* =========================
   Showcase
========================= */
.section-showcase{
  padding-top: 00px;
}
.section-showcase .showcase-top{
  margin-bottom: 26px;
}
.section-showcase .showcase-lead{
  max-width: 720px;
  color: rgba(255,255,255,.80);
  line-height: 1.6;
  margin: 0;
}

.showcase-grid{
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 22px;
  align-items: start;
}

.showcase-media{
  padding: 18px;
  border-radius: var(--radius2);
  background:
    radial-gradient(700px 380px at 25% 10%, rgba(255,46,166,.18), transparent 60%),
    rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
}

.showcase-media-inner{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

.showcase-media-inner.is-empty{
  min-height: 420px;
}

.showcase-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* 오버레이 공통 */
.showcase-overlay{
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  pointer-events: none;
}

.showcase-overlay--top{
  /*top: 38%;*/
  display: flex;
  justify-content: flex-end;
  padding-right: 26px;
}

.showcase-overlay--bottom{
  bottom: 26px;
  padding: 0 26px;
}

/* 10X 박스 */
.showcase-overlay-box{
  width: min(420px, 80%);
  padding: 22px 22px 18px;
  border-radius: 18px;
  background: rgba(170,170,170,.62);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.showcase-overlay-big{
  font-size: 54px;
  letter-spacing: -.02em;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.showcase-overlay-sub{
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
}

/* 핑크 rating 바 */
.showcase-rating{
  display:flex;
  align-items:center;
  gap: 16px;
  padding: 18px 18px;
  border-radius: 18px;
  background: linear-gradient(90deg, var(--pink), var(--pink2));
  box-shadow: 0 18px 60px rgba(255,46,166,.18);
}

.showcase-avatars{
  display:flex;
  align-items:center;
}
.avatar-dot{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 3px solid rgba(255,255,255,.75);
  margin-left: -10px;
}
.avatar-dot:first-child{margin-left:0}
.avatar-plus{
  width: 38px; height: 38px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.96);
  color: rgba(0,0,0,.75);
  font-weight: 900;
  margin-left: -8px;
  border: 3px solid rgba(255,255,255,.75);
}

.showcase-stars{
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 16px;
  color:#fff;
}
.showcase-usedby{
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255,255,255,.92);
}

/* 이미지 없을때 배경 */
.showcase-fallback{
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 320px at 30% 25%, rgba(255,46,166,.22), transparent 60%),
    radial-gradient(600px 320px at 80% 20%, rgba(95,120,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  opacity: .9;
  z-index:1;
}
.showcase-photo{position:relative; z-index:2;}
.showcase-media-inner.is-empty .showcase-fallback{opacity:1; z-index:2;}
.showcase-media-inner.is-empty .showcase-photo{display:none;}

/* 오른쪽 카드 + 텍스트 */
.showcase-copy{
  padding-top: 10px;
}
.showcase-mini{
  padding: 0;
  border-radius: var(--radius2);
  overflow:hidden;
  border: 1px solid rgba(255,46,166,.22);
  background: rgba(255,46,166,.06);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.showcase-mini-inner{
  padding: 18px 18px 16px;
  background: rgba(255,255,255,.03);
}

.showcase-mini-title{
  color: rgba(255,255,255,.70);
  font-size: 12px;
}
.showcase-mini-value{
  margin-top: 6px;
  font-size: 22px;
  font-weight: 800;
}
.showcase-mini-chart{
  margin-top: 16px;
  height: 72px;
  display:flex;
  gap: 10px;
  align-items:flex-end;
}
.showcase-mini-chart .bar{
  width: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  height: 24px;
}
.showcase-mini-chart .bar:nth-child(1){height: 34px;}
.showcase-mini-chart .bar:nth-child(2){height: 46px;}
.showcase-mini-chart .bar:nth-child(3){height: 22px;}
.showcase-mini-chart .bar:nth-child(4){height: 54px;}
.showcase-mini-chart .bar:nth-child(5){height: 30px;}
.showcase-mini-chart .bar:nth-child(6){height: 62px;}
.showcase-mini-chart .bar:nth-child(7){height: 70px;}
.showcase-mini-chart .bar:nth-child(8){height: 40px;}
.showcase-mini-chart .bar:nth-child(9){height: 58px;}
.showcase-mini-chart .bar:nth-child(10){height: 28px;}
.showcase-mini-chart .bar.is-accent{
  background: linear-gradient(180deg, var(--pink), var(--pink2));
  box-shadow: 0 10px 30px rgba(255,46,166,.25);
}

.showcase-title{
  margin: 18px 0 0;
  font-size: 24px;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.showcase-desc{
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.6;
}
.showcase-link{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  margin-top: 14px;
  color: rgba(255,103,196,.95);
}
.showcase-link:hover{
  color: #fff;
}

/* =========================
   Testimonials
========================= */
.section-testimonials .testimonials-head{
  text-align:center;
  margin-bottom: 34px;
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,46,166,.35);
  background: rgba(255,46,166,.10);
  color: rgba(255,103,196,.95);
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 13px;
}

.testimonials-grid{
  margin-top: 26px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.t-card{
  position: relative;
  border-radius: var(--radius2);
  padding: 18px;
  background:
    radial-gradient(600px 260px at 30% 10%, rgba(255,46,166,.12), transparent 60%),
    rgba(255,255,255,.02);
  border: 1px solid rgba(255,46,166,.18);
  overflow:hidden;
}
.t-card:before{
  content:"";
  position:absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(420px 220px at 15% 20%, rgba(255,46,166,.18), transparent 60%);
  filter: blur(18px);
  opacity: .65;
  pointer-events:none;
}
.t-card > *{position:relative; z-index:1;}

.t-head{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 10px;
}

.t-avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  flex-shrink: 0;
}

.t-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.t-name{
  font-weight: 800;
  font-size: 14px;
  display:flex;
  align-items:center;
  gap: 8px;
}
.t-verified{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(95,120,255,.9);
  display:inline-block;
}
.t-handle{
  font-size: 14px;
  color: rgba(255,255,255,.55);
  margin-top: 2px;
}

.t-text{
  margin: 10px 0 0;
  color: rgba(255,255,255,.70);
  line-height: 1.65;
  font-size: 13px;

  /* 카드 높이 균일 + 말줄임 느낌 */
  min-height: 54px;
}

/* =========================
   Responsive (Showcase/Testi)
========================= */
@media (max-width: 980px){
  .showcase-grid{grid-template-columns: 1fr; gap: 18px;}
  .showcase-overlay--top{top: 34%; padding-right: 16px;}
  .showcase-overlay--bottom{padding: 0 16px;}
  .showcase-title{font-size: 26px;}

  .testimonials-grid{grid-template-columns: 1fr;}
}

/* =========================
   Scroll Fade (In/Out)
========================= */

/* 초기 상태(안보임) */
.fx{
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .7s ease,
    transform .7s ease;
  will-change: opacity, transform;
}

/* 보이는 상태 */
.fx.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* 벗어날 때(사라짐) */
.fx.is-out{
  opacity: 0;
  transform: translateY(22px);
}

/* 초기 상태 : 위에 있음 */
.fx-down{
  opacity: 0;
  transform: translateY(-22px);
  transition:
    opacity .7s ease,
    transform .7s ease;
  will-change: opacity, transform;
}

/* 보이는 상태 */
.fx-down.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* 사라질 때 */
.fx-down.is-out{
  opacity: 0;
  transform: translateY(-22px);
}

/* 더 부드러운 버전(줌 살짝) */
.fx-zoom{
  opacity: 0;
  transform: translateY(18px) scale(.98);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.fx-zoom.is-in{ opacity:1; transform: translateY(0) scale(1); }

/* 좌/우 슬라이드 */
.fx-left{ opacity:0; transform: translateX(-24px); transition: opacity .7s ease, transform .7s ease; }
.fx-right{ opacity:0; transform: translateX(24px); transition: opacity .7s ease, transform .7s ease; }
.fx-left.is-in, .fx-right.is-in{ opacity:1; transform: translateX(0); }

/* 접근성: 움직임 최소화 */
@media (prefers-reduced-motion: reduce){
  .fx, .fx-zoom, .fx-left, .fx-right{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* =========================
   Header Fade Down (NO observer)
========================= */
.fx-header{
  animation: headerDrop .6s ease both;
}

@keyframes headerDrop{
  from{
    opacity: 0;
    transform: translateY(-16px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}
.fx,
.fx-down,
.fx-left,
.fx-right,
.fx-zoom{
  transition-delay: var(--delay, 0s);
}

/* Hero Rotator Fade */
.hero-rotator{
  position: relative;
}

.hero-rotator.is-fading{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s ease, transform .55s ease;
}

.hero-rotator{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .55s ease, transform .55s ease;
}

/* image fading(선택) */
.hero-rotator.is-img-fading .hero-img{
  opacity: .35;
  transition: opacity .18s ease;
}
.hero-img{
  opacity: 1;
  transition: opacity .18s ease;
}

/* Dots */
.hero-dots{
  position:absolute;
  left: 50%;
  bottom: 33px;
  transform: translateX(-50%);
  display:flex;
  gap: 10px;
  z-index: 3;
}

.hero-dot{
  width: 15px;
  height: 15px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.18);
  cursor:pointer;
  padding:0;
}

.hero-dot.is-active{
  background: linear-gradient(90deg, var(--pink), var(--pink2));
  border-color: rgba(255,46,166,.65);
  transform: scale(1.15);
}

/* =========================
   Testimonials Mobile Slider
========================= */
.t-slider{ position: relative; }

@media (max-width: 980px){
  /* 모바일에서는 그리드 -> 가로 슬라이더로 */
  .section-testimonials .testimonials-grid{
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .section-testimonials .testimonials-grid::-webkit-scrollbar{ display:none; }

  /* 카드 하나가 "화면의 50% - gap" = 위아래 2개씩 보이도록 */
  .section-testimonials .t-card{
    flex: 0 0 calc((100% - 14px) / 2);
    scroll-snap-align: start;
  }

  /* 2개씩(한 페이지) 정확히 맞추려면 컨테이너 패딩도 고려 */
  .section-testimonials .container{
    width: min(var(--max), calc(100% - 32px));
  }

  /* 드래그 시 텍스트 선택 방지 (JS에서 class 토글) */
  .section-testimonials .testimonials-grid.is-dragging{
    cursor: grabbing;
  }
  .section-testimonials .testimonials-grid.is-dragging *{
    user-select: none;
  }
}
/* =========================
   FAQ
========================= */
.section-faq .faq-list{
  margin: 34px auto 0;
  max-width: 980px;
  display: grid;
  gap: 14px;
}

.faq-item{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,46,166,.18);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.faq-q{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 18px 18px;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  text-align:left;
}

.faq-qtext{
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.35;
}

.faq-plus{
  width: 38px; height: 38px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 12px;
  background: rgba(255,46,166,.10);
  border: 1px solid rgba(255,46,166,.28);
  color: rgba(255,103,196,.95);
  font-size: 20px;
  transition: transform .18s ease, background .18s ease;
  flex: 0 0 auto;
}

.faq-item.is-open .faq-plus{
  transform: rotate(45deg);
  background: rgba(255,46,166,.16);
}

.faq-a{
  border-top: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}

.faq-acontent{
  padding: 16px 18px 18px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 14px;
}

/* 슬라이드 애니메이션 (JS에서 height 제어) */
.faq-a.is-anim{
  transition: height .28s ease;
}

/* hover */
.faq-q:hover .faq-plus{
  background: rgba(255,46,166,.16);
}

/* mobile */
@media (max-width: 980px){
  .section-faq .faq-list{
    max-width: 100%;
  }
}
.fs-none{
	font-size: 0 !important;
}
.fs--10 {
	font-size: .625rem !important;
}
.fs-11{
	font-size: .688rem !important;
}
.fs-12{
	font-size: .75rem !important;
}
.fs-13 {
	font-size: .815rem !important;
}
.fs-14 {
	font-size: .875rem !important;
}
.fs-15 {
	font-size: .938rem !important;
}
.fs-16 {
	font-size: 1rem !important;
}
.fs-17 {
	font-size: 1.063rem !important;
}
.fs-18 {
	font-size: 1.125rem !important;
}
.fs-19 {
	font-size: 1.188rem !important;
}
.fs-20 {
	font-size: 1.25rem !important;
}
.fs-22 {
	font-size: 1.375rem !important;
}
.fs-24 {
	font-size: 1.5rem !important;
}
.fs-26 {
	font-size: 1.625rem !important;
}
.fs-28 {
	font-size: 1.75rem !important;
}
.fs-30 {
	font-size: 1.875rem !important;
}
.fs-32 {
	font-size: 2rem !important;
}
.fs-34 {
	font-size: 2.125rem !important;
}
.fs-36 {
	font-size: 2.25rem !important;
}
.fs-38 {
	font-size: 2.375rem !important;
}
.fs-40 {
	font-size: 2.5rem !important;
}
.fs-44 {
	font-size: 2.75rem !important;
}
.fs-48 {
	font-size: 3rem !important;
}
.fs-52 {
	font-size: 3.25rem !important;
}
.fs-56 {
	font-size: 3.5rem !important;
}
.fs-60 {
	font-size: 3.75rem !important;
}
.fs-70 {
	font-size: 4.375rem !important;
}
.fs-80 {
	font-size: 5rem !important;
}
.fs-90 {
	font-size: 5.625rem !important;
}
.fs-100 {
	font-size: 6.25rem !important;
}
.m-0 {
	margin: 0 !important;
}
.mt-0 {
	margin-top: 0 !important;
}
.mr-0 {
	margin-right: 0 !important;
}
.mb-0 {
	margin-bottom: 0 !important;
}
.ml-0 {
	margin-left: 0 !important;
}
.mx-0 {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.my-0 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.m-1 {
	margin: 0.25rem !important;
}
.mt-1 {
	margin-top: 0.25rem !important;
}
.mr-1 {
	margin-right: 0.25rem !important;
}
.mb-1 {
	margin-bottom: 0.25rem !important;
}
.ml-1 {
	margin-left: 0.25rem !important;
}
.mx-1 {
	margin-left: 0.25rem !important;
	margin-right: 0.25rem !important;
}
.my-1 {
	margin-top: 0.25rem !important;
	margin-bottom: 0.25rem !important;
}
.m-2 {
	margin: 0.5rem !important;
}
.mt-2 {
	margin-top: 0.5rem !important;
}
.mr-2 {
	margin-right: 0.5rem !important;
}
.mb-2 {
	margin-bottom: 0.5rem !important;
}
.ml-2 {
	margin-left: 0.5rem !important;
}
.mx-2 {
	margin-left: 0.5rem !important;
	margin-right: 0.5rem !important;
}
.my-2 {
	margin-top: 0.5rem !important;
	margin-bottom: 0.5rem !important;
}
.m-3 {
	margin: 0.75rem !important;
}
.mt-3 {
	margin-top: 0.75rem !important;
}
.mr-3 {
	margin-right: 0.75rem !important;
}
.mb-3 {
	margin-bottom: 0.75rem !important;
}
.ml-3 {
	margin-left: 0.75rem !important;
}
.mx-3 {
	margin-left: 0.75rem !important;
	margin-right: 0.75rem !important;
}
.my-3 {
	margin-top: 0.75rem !important;
	margin-bottom: 0.75rem !important;
}
.m-4 {
	margin: 1rem !important;
}
.mt-4 {
	margin-top: 1rem !important;
}
.mr-4 {
	margin-right: 1rem !important;
}
.mb-4 {
	margin-bottom: 1rem !important;
}
.ml-4 {
	margin-left: 1rem !important;
}
.mx-4 {
	margin-left: 1rem !important;
	margin-right: 1rem !important;
}
.my-4 {
	margin-top: 1rem !important;
	margin-bottom: 1rem !important;
}
.m-5 {
	margin: 1.25rem !important;
}
.mt-5 {
	margin-top: 1.25rem !important;
}
.mr-5 {
	margin-right: 1.25rem !important;
}
.mb-5 {
	margin-bottom: 1.25rem !important;
}
.ml-5 {
	margin-left: 1.25rem !important;
}
.mx-5 {
	margin-left: 1.25rem !important;
	margin-right: 1.25rem !important;
}
.my-5 {
	margin-top: 1.25rem !important;
	margin-bottom: 1.25rem !important;
}
.m-6 {
	margin: 1.5rem !important;
}
.mt-6 {
	margin-top: 1.5rem !important;
}
.mr-6 {
	margin-right: 1.5rem !important;
}
.mb-6 {
	margin-bottom: 1.5rem !important;
}
.ml-6 {
	margin-left: 1.5rem !important;
}
.mx-6 {
	margin-left: 1.5rem !important;
	margin-right: 1.5rem !important;
}
.my-6 {
	margin-top: 1.5rem !important;
	margin-bottom: 1.5rem !important;
}
.m-7 {
	margin: 2rem !important;
}
.mt-7 {
	margin-top: 2rem !important;
}
.mr-7 {
	margin-right: 2rem !important;
}
.mb-7 {
	margin-bottom: 2rem !important;
}
.ml-7 {
	margin-left: 2rem !important;
}
.mx-7 {
	margin-left: 2rem !important;
	margin-right: 2rem !important;
}
.my-7 {
	margin-top: 2rem !important;
	margin-bottom: 2rem !important;
}
.m-8 {
	margin: 3rem !important;
}
.mt-8 {
	margin-top: 3rem !important;
}
.mr-8 {
	margin-right: 3rem !important;
}
.mb-8 {
	margin-bottom: 3rem !important;
}
.ml-8 {
	margin-left: 3rem !important;
}
.mx-8 {
	margin-left: 3rem !important;
	margin-right: 3rem !important;
}
.my-8 {
	margin-top: 3rem !important;
	margin-bottom: 3rem !important;
}
.m-9 {
	margin: 4rem !important;
}
.mt-9 {
	margin-top: 4rem !important;
}
.mr-9 {
	margin-right: 4rem !important;
}
.mb-9 {
	margin-bottom: 4rem !important;
}
.ml-9 {
	margin-left: 4rem !important;
}
.mx-9 {
	margin-left: 4rem !important;
	margin-right: 4rem !important;
}
.my-9 {
	margin-top: 4rem !important;
	margin-bottom: 4rem !important;
}
.m-10 {
	margin: 6rem !important;
}
.mt-10 {
	margin-top: 6rem !important;
}
.mr-10 {
	margin-right: 6rem !important;
}
.mb-10 {
	margin-bottom: 6rem !important;
}
.ml-10 {
	margin-left: 6rem !important;
}
.mx-10 {
	margin-left: 6rem !important;
	margin-right: 6rem !important;
}
.my-10 {
	margin-top: 6rem !important;
	margin-bottom: 6rem !important;
}
.m-11 {
	margin: 8rem !important;
}
.mt-11 {
	margin-top: 8rem !important;
}
.mr-11 {
	margin-right: 8rem !important;
}
.mb-11 {
	margin-bottom: 8rem !important;
}
.ml-11 {
	margin-left: 8rem !important;
}
.mx-11 {
	margin-left: 8rem !important;
	margin-right: 8rem !important;
}
.my-11 {
	margin-top: 8rem !important;
	margin-bottom: 8rem !important;
}
.m-12 {
	margin: 10rem !important;
}
.mt-12 {
	margin-top: 10rem !important;
}
.mr-12 {
	margin-right: 10rem !important;
}

.mb-12 {
	margin-bottom: 10rem !important;
}
.ml-12 {
	margin-left: 10rem !important;
}
.mx-12 {
	margin-left: 10rem !important;
	margin-right: 10rem !important;
}
.my-12 {
	margin-top: 10rem !important;
	margin-bottom: 10rem !important;
}
.lh-0 {
	line-height: 0 !important;
}

.lh-f1 {
	line-height: 0.7 !important;
}

.lh-f2 {
	line-height: 0.85 !important;
}

.lh-1 {
	line-height: 1 !important;
}

.lh-2 {
	line-height: 1.15 !important;
}

.lh-3 {
	line-height: 1.3 !important;
}

.lh-4 {
	line-height: 1.45 !important;
}

.lh-5 {
	line-height: 1.6 !important;
}

.lh-6 {
	line-height: 1.75 !important;
}

.lh-7 {
	line-height: 1.9 !important;
}

.lh-8 {
	line-height: 2.05 !important;
}

.fw-100 {
	font-weight: 100 !important;
}

.fw-200 {
	font-weight: 200 !important;
}

.fw-300 {
	font-weight: 300 !important;
}

.fw-400 {
	font-weight: 400 !important;
}

.fw-500 {
	font-weight: 500 !important;
}

.fw-600 {
	font-weight: 600 !important;
}

.fw-700 {
	font-weight: 700 !important;
}

.fw-800 {
	font-weight: 800 !important;
}

.ls {
	letter-spacing: 2px !important;
}

.ls-0 {
	letter-spacing: 0px !important;
}

.ls--1 {
	letter-spacing: -1px !important;
}

.ls--2 {
	letter-spacing: -2px !important;
}