/* =========================================================
   클린이즈 CLEANIS — 보조 CSS (full-bleed / grid / slider / 상태 보정)
   본문은 Tailwind utility 중심. 여기엔 CDN 한계 보정·예외 스타일만.
   ========================================================= */

:root {
  --brand: #16B8C9;
  --brand-deep: #0E8C9C;
  --navy: #0E2233;
  --mint: #3FD0A8;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
* { -webkit-tap-highlight-color: transparent; }

/* ---- full-bleed: 좌우 배경 확장 (area 컨테이너는 내부 max-w로 중앙 제한) ---- */
.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---- 공용 2컬럼 grid: Tailwind CDN 단일 1fr 폭발 방지(minmax) ---- */
.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.grid-2 > * { min-width: 0; }

/* ---- STATS grid ---- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
}
@media (min-width: 768px) {
  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stat-grid > * { min-width: 0; }

/* ---- SERVICES grid ---- */
.svc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-grid > * { min-width: 0; }

.svc-card {
  background: #fff;
  border: 1px solid #E8EFF2;
  border-radius: 1.25rem;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -22px rgba(14, 34, 51, .28);
  border-color: rgba(22, 184, 201, .4);
}
.svc-thumb { aspect-ratio: 16/10; overflow: hidden; }
.svc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.svc-card:hover .svc-thumb img { transform: scale(1.07); }
.svc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: .85rem;
  background: linear-gradient(135deg, #EAF7F9, #D6F0F3);
  color: var(--brand-deep);
}
.svc-more {
  margin-top: 1.1rem; display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 700; font-size: .88rem; color: var(--brand-deep);
  transition: gap .25s ease;
}
.svc-card:hover .svc-more { gap: .7rem; }

/* ---- WHY grid ---- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.why-grid > * { min-width: 0; }
.why-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1.1rem;
  padding: 1.4rem 1.25rem;
  transition: background .3s ease, transform .3s ease, border-color .3s ease;
}
.why-card:hover {
  background: rgba(22,184,201,.12);
  border-color: rgba(22,184,201,.45);
  transform: translateY(-4px);
}
.why-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: .9rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #fff;
}

/* ---- PROCESS grid ---- */
.proc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
}
@media (min-width: 640px) { .proc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .proc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.proc-grid > * { min-width: 0; }
.proc-card {
  position: relative;
  background: #F6FAFB;
  border: 1px solid #E8EFF2;
  border-radius: 1.1rem;
  padding: 1.8rem 1.5rem;
  transition: transform .3s ease, box-shadow .3s ease;
}
.proc-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px -20px rgba(14,34,51,.25); }
.proc-num {
  position: absolute; top: 1rem; right: 1.25rem;
  font-weight: 800; font-size: 1.6rem; color: rgba(22,184,201,.22);
}
.proc-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem; border-radius: 1rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #fff; box-shadow: 0 10px 22px -10px rgba(22,184,201,.6);
}

/* ---- GALLERY: right-full rail (area 시작점 → 오른쪽 full) ---- */
.right-full-rail {
  margin-left: max(1rem, calc(50% - 660px + 1.5rem));
}
@media (max-width: 640px) { .right-full-rail { margin-left: 1rem; } }
.gallery-swiper { overflow: visible; }
/* Swiper가 slide에 display:block 강제 → 명시적으로 유지 */
.gallery-swiper .swiper-slide { width: 320px; height: auto; }
@media (min-width: 768px) { .gallery-swiper .swiper-slide { width: 380px; } }
.gal-slide {
  position: relative; border-radius: 1.1rem; overflow: hidden;
  aspect-ratio: 4/3; background: #dfe9ec;
  display: block !important;
}
.gal-slide img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gal-slide:hover img { transform: scale(1.06); }
.gal-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1.2rem .9rem;
  background: linear-gradient(to top, rgba(14,34,51,.82), transparent);
  color: #fff;
}
.gal-cap p { font-size: .85rem; font-weight: 600; margin-top: .35rem; }
.gal-tag {
  display: inline-block; padding: .15rem .6rem; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: .72rem; font-weight: 700;
}
.gal-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  background: #fff; border: 1px solid #DBE7EB; color: var(--navy);
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .15s ease;
}
.gal-nav:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.gal-nav:active { transform: scale(.92); }
.gal-nav.swiper-button-disabled { opacity: .4; cursor: default; }

/* ---- PRICE tabs / cards ---- */
.price-tab {
  padding: .7rem 1.3rem; border-radius: 999px;
  font-weight: 700; font-size: .92rem; color: #5A6F7D;
  background: #F1F6F8; border: 1px solid transparent;
  transition: all .25s ease;
}
.price-tab:hover { color: var(--brand-deep); }
.price-tab.is-active {
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #fff; box-shadow: 0 10px 22px -12px rgba(22,184,201,.7);
}
.price-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
}
@media (min-width: 768px) { .price-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.price-cards > * { min-width: 0; }
.price-card {
  position: relative;
  background: #fff; border: 1px solid #E3EBEE; border-radius: 1.2rem;
  padding: 1.8rem 1.5rem; text-align: center;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.price-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -22px rgba(14,34,51,.25); }
.price-card.featured {
  border-color: var(--brand);
  box-shadow: 0 20px 44px -20px rgba(22,184,201,.5);
}
.pc-badge {
  position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%);
  padding: .25rem .85rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #fff; font-size: .72rem; font-weight: 700;
}
.pc-size { font-weight: 700; color: #5A6F7D; font-size: .92rem; }
.pc-amt { margin-top: .7rem; color: #5A6F7D; font-size: .9rem; }
.pc-amt b { display: block; font-size: 1.75rem; color: var(--navy); font-weight: 800; }
.pc-list { margin-top: 1.2rem; display: grid; gap: .55rem; text-align: left; }
.pc-list li {
  position: relative; padding-left: 1.5rem;
  color: #5A6F7D; font-size: .88rem;
}
.pc-list li::before {
  content: ""; position: absolute; left: 0; top: .5rem;
  width: .85rem; height: .85rem;
  background: var(--brand); border-radius: 999px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---- REVIEW slider ---- */
.review-swiper { padding-bottom: .5rem; }
.review-swiper .swiper-slide { height: auto; display: flex !important; }
.rev-card {
  background: #fff; border: 1px solid #E3EBEE; border-radius: 1.2rem;
  padding: 1.8rem 1.6rem; width: 100%;
  display: flex; flex-direction: column; gap: 1rem;
}
.rev-stars { display: flex; gap: .2rem; color: #FFB020; }
.rev-stars i { font-size: 1.02rem; color: #FFB020; }
.rev-text { color: #38505E; font-size: .95rem; line-height: 1.65; flex: 1; }
.rev-by { display: flex; align-items: center; gap: .75rem; }
.rev-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #fff; font-weight: 800; font-size: 1.05rem; flex: 0 0 auto;
}
.rev-by b { display: block; color: var(--navy); font-size: .92rem; }
.rev-by span { display: block; color: #8298A4; font-size: .8rem; }
.review-pagination .swiper-pagination-bullet {
  width: .55rem; height: .55rem; background: #B7CFD6; opacity: 1;
  transition: width .25s ease, background .25s ease;
}
.review-pagination .swiper-pagination-bullet-active {
  width: 1.6rem; border-radius: 999px; background: var(--brand-deep);
}

/* ---- FAQ accordion ---- */
.faq-item {
  border: 1px solid #E3EBEE; border-radius: 1rem; overflow: hidden;
  background: #fff; transition: border-color .25s ease, box-shadow .25s ease;
}
.faq-item.is-open { border-color: rgba(22,184,201,.5); box-shadow: 0 14px 30px -20px rgba(14,34,51,.25); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.2rem 1.4rem; text-align: left;
  font-weight: 700; font-size: 1rem; color: var(--navy); cursor: pointer;
}
.faq-ico { color: var(--brand-deep); transition: transform .3s ease; flex: 0 0 auto; }
.faq-item.is-open .faq-ico { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease;
}
.faq-a p {
  padding: 0 1.4rem 1.2rem; color: #5A6F7D; font-size: .92rem; line-height: 1.7;
}

/* ---- FORM ---- */
.form-label { display: block; font-size: .82rem; font-weight: 700; color: #38505E; margin-bottom: .4rem; }
.form-input {
  width: 100%; padding: .8rem 1rem; border-radius: .75rem;
  border: 1px solid #DBE7EB; background: #F8FBFC;
  font-size: .92rem; color: var(--navy);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-input::placeholder { color: #A6B8C2; }
.form-input:focus {
  outline: none; border-color: var(--brand); background: #fff;
  box-shadow: 0 0 0 3px rgba(22,184,201,.15);
}

/* ---- CTA contact icon ---- */
.cta-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: .8rem; flex: 0 0 auto;
  background: rgba(255,255,255,.12); color: #fff;
}

/* ---- FOOTER ---- */
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.2rem 1.5rem;
}
@media (min-width: 640px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .foot-grid { grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr); } }
.foot-grid > * { min-width: 0; }
.foot-h { color: #fff; font-weight: 700; font-size: .95rem; margin-bottom: 1rem; }
.foot-ul { display: grid; gap: .65rem; }
.foot-ul a { font-size: .88rem; color: rgba(255,255,255,.55); transition: color .2s ease; }
.foot-ul a:hover { color: var(--brand); }
.foot-sns {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem; border-radius: .65rem;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.7);
  transition: background .25s ease, color .25s ease;
}
.foot-sns:hover { background: var(--brand); color: #fff; }

/* ---- MOBILE DRAWER ---- */
#mobileMenu.is-open { visibility: visible; opacity: 1; }
.drawer-panel { transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); }
#mobileMenu.is-open .drawer-panel { transform: translateX(0); }
.drawer-link {
  padding: .95rem .5rem; font-size: 1.05rem; font-weight: 700; color: #2E4456;
  border-bottom: 1px solid #F0F5F7;
  display: flex; align-items: center; justify-content: space-between;
  transition: color .2s ease, padding-left .2s ease;
}
.drawer-link:hover { color: var(--brand-deep); padding-left: 1rem; }

/* ---- header sticky shadow ---- */
#siteHeader.is-stuck { box-shadow: 0 8px 24px -16px rgba(14,34,51,.25); }

/* ---- ENTRY POPUP (공지/이벤트 — PC·모바일 공용) ---- */
#entryPopup.is-open { display: flex; }
body.popup-open { overflow: hidden; }
#entryPopup.is-open .popup-card { animation: popup-in .35s cubic-bezier(.16,1,.3,1); }
@keyframes popup-in {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* 패밀리사이트 select 화살표 자리(appearance 제거 시 네이티브 화살표 숨김) */
#familySite::-ms-expand { display: none; }

/* ---- 작은 화면 타이포 보정 ---- */
@media (max-width: 320px) {
  h1 { word-break: keep-all; }
}