/* ============================================================
   WEBIS PT STUDIO — theme/24 보조 CSS
   본문은 Tailwind utility 중심. 여기엔 full-bleed/그라데이션/
   grid 함정 보정/컴포넌트 상태 등 예외 보조만 둔다.
   ============================================================ */

:root{
  --pt-indigo:#4F46E5;
  --pt-indigo-d:#4338CA;
  --pt-indigo-l:#818CF8;
  --pt-navy:#111827;
}

html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; overflow-x:hidden; }

/* grid 자식 overflow 방지 (Tailwind4 CDN minmax 함정 보정) */
[class*="grid-cols"] > *{ min-width:0; }

/* ---------- HERO ---------- */
.hero-overlay{
  background:
    linear-gradient(110deg, rgba(17,16,40,0.92) 0%, rgba(31,24,70,0.78) 42%, rgba(49,38,120,0.55) 100%),
    radial-gradient(120% 120% at 80% 20%, rgba(79,70,229,0.45) 0%, rgba(17,16,40,0.2) 60%);
}

/* ---------- 버튼 상태 ---------- */
.btn-primary{
  background:var(--pt-indigo); color:#fff;
  box-shadow:0 10px 26px rgba(79,70,229,0.45);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn-primary:hover{ background:var(--pt-indigo-d); box-shadow:0 14px 32px rgba(79,70,229,0.55); }
.btn-primary:active{ transform:scale(.96); }

.btn-ghost{
  background:rgba(255,255,255,0.08); color:#fff;
  border:1px solid rgba(255,255,255,0.30);
  transition:transform .18s ease, background .18s ease;
}
.btn-ghost:hover{ background:rgba(255,255,255,0.16); }
.btn-ghost:active{ transform:scale(.96); }

/* ---------- 헤더 스크롤 상태 ---------- */
#header.scrolled{
  background:rgba(15,18,32,0.92);
  backdrop-filter:blur(10px);
  box-shadow:0 4px 20px rgba(0,0,0,0.18);
}

/* ---------- FOR YOU 아이템 ---------- */
.foryou-item{
  display:flex; align-items:center; gap:.85rem;
  padding:1.05rem 1.35rem;
  background:#F8F9FC; border:1px solid #EEF1F8; border-radius:.85rem;
  font-size:.95rem; font-weight:500; color:#374151;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.foryou-item:hover{ background:#fff; border-color:#C7D2FE; transform:translateY(-2px); box-shadow:0 8px 22px rgba(79,70,229,0.10); }
.foryou-item .chk{
  flex:none; display:grid; place-items:center;
  width:1.85rem; height:1.85rem; border-radius:.55rem;
  background:#E0E7FF; color:var(--pt-indigo);
}

/* ---------- HOW IT WORKS 스텝 ---------- */
.step{ position:relative; }
.step-num{
  position:absolute; top:-1.6rem; left:50%; transform:translateX(-50%);
  font-family:Inter,sans-serif; font-size:3.6rem; font-weight:800;
  color:rgba(255,255,255,0.05); line-height:1; pointer-events:none; user-select:none;
}
.step-ico{
  position:relative; display:inline-grid; place-items:center;
  width:3.4rem; height:3.4rem; border-radius:1rem;
  background:linear-gradient(135deg,#4F46E5,#6366F1); color:#fff;
  box-shadow:0 10px 24px rgba(79,70,229,0.4);
  transition:transform .25s ease;
}
.step:hover .step-ico{ transform:translateY(-4px); }

/* ---------- FACILITY 갤러리 ---------- */
.facility-card{
  position:relative; display:block; border-radius:1rem; overflow:hidden;
  aspect-ratio:4/3;
}
.facility-card img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.facility-card:hover img{ transform:scale(1.06); }
.facility-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(17,24,39,0.72) 0%, rgba(17,24,39,0) 45%);
}
.facility-label{
  position:absolute; left:1rem; bottom:.85rem; z-index:1;
  color:#fff; font-size:.85rem; font-weight:700; letter-spacing:.01em;
}

/* ---------- PRICING ---------- */
.price-card{
  position:relative; background:#fff; border:1px solid #EEF1F8;
  border-radius:1.1rem; padding:2rem 1.75rem;
  box-shadow:0 10px 30px rgba(17,24,39,0.05);
  transition:transform .25s ease, box-shadow .25s ease;
}
.price-card:hover{ transform:translateY(-4px); box-shadow:0 18px 44px rgba(17,24,39,0.10); }
.price-card-feature{
  border:1.5px solid #C7D2FE;
  box-shadow:0 20px 48px rgba(79,70,229,0.16);
}
.price-badge{
  position:absolute; top:-0.9rem; left:50%; transform:translateX(-50%);
  background:var(--pt-indigo); color:#fff;
  font-size:.78rem; font-weight:700; padding:.3rem 1rem; border-radius:999px;
  box-shadow:0 6px 16px rgba(79,70,229,0.4);
}
.price-li{ position:relative; padding-left:1.6rem; }
.price-li::before{
  content:""; position:absolute; left:0; top:.15rem;
  width:1.05rem; height:1.05rem; border-radius:50%;
  background:#E0E7FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/0.62rem no-repeat;
}
.price-btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:3.1rem; margin-top:1.75rem;
  border-radius:.7rem; font-size:.95rem; font-weight:700;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.price-btn:active{ transform:scale(.97); }
.price-btn-soft{ background:#F1F2F6; color:#4B5563; }
.price-btn-soft:hover{ background:#E5E7EF; color:var(--pt-indigo); }
.price-btn-primary{ background:var(--pt-indigo); color:#fff; box-shadow:0 10px 24px rgba(79,70,229,0.4); }
.price-btn-primary:hover{ background:var(--pt-indigo-d); }

/* ---------- 폼 필드 ---------- */
.form-field{
  width:100%; height:3.1rem; padding:0 1.1rem;
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.22);
  border-radius:.7rem; color:#fff; font-size:.95rem;
  transition:border-color .2s ease, background .2s ease;
}
.form-field::placeholder{ color:rgba(255,255,255,0.6); }
.form-field:focus{ outline:none; border-color:#fff; background:rgba(255,255,255,0.18); }
select.form-field{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.6rem;
}

/* ---------- SNS / TOP ---------- */
.sns-ico{
  display:grid; place-items:center; width:2.5rem; height:2.5rem;
  border-radius:.65rem; background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.7);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.sns-ico:hover{ background:var(--pt-indigo); color:#fff; transform:translateY(-2px); }

#topBtn.show{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* ---------- 푸터 패밀리/관련 사이트 셀렉트 ---------- */
.footer-select{
  appearance:none; -webkit-appearance:none;
  min-width:11rem; height:2.85rem; padding:0 2.4rem 0 1rem;
  background-color:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.16); border-radius:.65rem;
  color:rgba(255,255,255,0.78); font-size:.85rem; font-weight:500;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center;
  cursor:pointer; transition:border-color .2s ease, background-color .2s ease;
}
.footer-select:hover{ border-color:rgba(129,140,252,0.5); background-color:rgba(255,255,255,0.10); }
.footer-select:focus{ outline:none; border-color:#818CF8; }
.footer-select option{ color:#111827; }
@media (max-width:480px){ .footer-select{ width:100%; min-width:0; } }

/* ---------- 진입 팝업 ---------- */
#promoPopup.show{ display:flex; }
#promoPopup [data-popup-card]{
  animation:popup-in .32s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes popup-in{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }

/* ---------- 모바일 드로어 ----------
   Tailwind4의 translate-x-full은 transform이 아닌 translate 속성을 쓰므로
   여기서도 translate 속성으로 직접 제어한다(함정 회피). */
#mobileMenu [data-panel]{ translate:100% 0; transition:translate .3s ease; }
#mobileMenu.open [data-panel]{ translate:0 0; }

/* ---------- 애니메이션 ---------- */
@keyframes bounce-slow{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
.animate-bounce-slow{ animation:bounce-slow 1.8s ease-in-out infinite; }

/* AOS 미발동 대비: IO 폴백이 부여하는 클래스 */
[data-aos].ws-shown{ opacity:1 !important; transform:none !important; }

/* 모바일 미세 조정 */
@media (max-width:380px){
  .step-num{ font-size:2.8rem; }
}