/* ============================================================
   theme/23 — 위즈리스 WIZ LEASE
   Tailwind utility 보조용 예외 CSS만 둔다.
   (full-bleed / 그리드 minmax / swiper 보정 / 배경 / 컴포넌트 패턴)
   ============================================================ */

:root{
  --blue:#3772e8; --blue-dark:#2a5fd0;
  --navy:#1a2238; --navy2:#141a2e;
  --green:#20c997; --red:#f0556a; --orange:#f08c3e;
  --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb; --soft:#f5f7fa;
}

html{ scroll-behavior:smooth; }
body{ overflow-x:hidden; }
img{ max-width:100%; display:block; }

/* ---- 좌우 full-bleed (컨테이너 밖 배경 확장) ---- */
.full-bleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* ---- HERO : 2컬럼 (Tailwind 단일 1fr 함정 회피) ---- */
.grid-hero{ display:grid; grid-template-columns:minmax(0,1fr); gap:32px; }
.grid-hero>*{ min-width:0; }
@media (min-width:1024px){
  .grid-hero{ grid-template-columns:minmax(0,1.15fr) minmax(0,420px); gap:48px; }
}

/* ---- 배경 이미지 (무료 이미지, 출처주석 없음) ---- */
.hero-bg{
  background:url("https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?w=1600&q=80&auto=format&fit=crop") center/cover no-repeat;
}
.why-bg{
  background:url("https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=1600&q=80&auto=format&fit=crop") center/cover no-repeat;
}
.review-bg{
  background:url("https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?w=1600&q=80&auto=format&fit=crop") center/cover no-repeat;
}

/* ---- 폼 필드 ---- */
.form-field{
  width:100%; height:46px; padding:0 14px;
  border:1px solid #dfe3ea; border-radius:10px; background:#fff;
  font-size:14px; color:var(--ink);
}
.form-field::placeholder{ color:#9aa3b2; }
.form-field:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(55,114,232,.12); }
select.form-field{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236b7280' d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:34px;
}

/* ============================================================
   차량 카드 (즉시출고 / 최저가)
   ============================================================ */
.car-rail{ position:relative; }
/* Swiper 슬라이드 display:block 강제 함정 → flex 보정 + 폭 자동 */
.carSwiper .swiper-slide{ height:auto; display:flex !important; }
.car-card{
  display:flex; flex-direction:column; width:100%;
  background:#fff; border:1px solid #ebeef3; border-radius:14px; overflow:hidden;
  transition:box-shadow .2s, transform .2s;
}
.car-card:hover{ box-shadow:0 16px 36px rgba(20,26,46,.12); transform:translateY(-4px); }
.car-card .thumb{
  position:relative; aspect-ratio:16/10; background:#f4f6f9;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.car-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.car-badge{
  position:absolute; top:12px; display:inline-flex; align-items:center;
  height:24px; padding:0 9px; border-radius:6px; font-size:12px; font-weight:700; color:#fff;
}
.badge-instant{ right:64px; background:var(--red); }
.badge-best{ right:12px; background:var(--green); }
.car-card .body{ padding:16px 16px 18px; display:flex; flex-direction:column; flex:1; }
.car-brand{ display:flex; align-items:center; gap:6px; font-size:13px; color:#8a93a3; font-weight:600; }
.car-name{ margin-top:6px; font-size:19px; font-weight:800; color:var(--navy); }
.car-list-price{ margin-top:10px; font-size:13px; color:#9aa3b2; }
.car-price{ margin-top:2px; font-size:21px; font-weight:800; color:var(--blue); }
.car-price small{ font-size:14px; font-weight:700; }
.car-cond{ margin-top:2px; font-size:12px; color:#aeb5c1; }
.car-btns{ margin-top:14px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
.btn-quote, .btn-detail{
  height:42px; border-radius:9px; font-size:14px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:background .15s, color .15s, transform .1s; cursor:pointer;
}
.btn-quote{ background:var(--blue); color:#fff; }
.btn-quote:hover{ background:var(--blue-dark); }
.btn-detail{ background:#fff; color:var(--blue); border:1px solid var(--blue); }
.btn-detail:hover{ background:#eef4ff; }
.btn-quote:active, .btn-detail:active{ transform:scale(.97); }

/* ---- 캐러셀 화살표 ---- */
.nav-arrow{
  position:absolute; top:42%; transform:translateY(-50%); z-index:10;
  width:42px; height:42px; border-radius:9999px; background:#fff;
  border:1px solid #e5e7eb; color:#1a2238; box-shadow:0 6px 18px rgba(20,26,46,.12);
  display:grid; place-items:center; cursor:pointer; transition:background .15s, color .15s;
}
.nav-arrow:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }
.nav-arrow--dark{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); color:#fff; backdrop-filter:blur(4px); }
.nav-arrow--dark:hover{ background:#fff; color:var(--navy); }
.nav-arrow.swiper-button-disabled{ opacity:.35; cursor:default; }
@media (max-width:1023px){ .nav-arrow{ display:none; } }

/* ============================================================
   WHY (장기렌트 장점) — 6 glass 카드
   ============================================================ */
.grid-why{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media (min-width:768px){ .grid-why{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1024px){ .grid-why{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.why-card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:22px 14px; text-align:center; min-width:0;
  transition:background .2s, transform .2s;
}
.why-card:hover{ background:rgba(255,255,255,.12); transform:translateY(-4px); }
.why-ic{
  width:46px; height:46px; margin:0 auto 14px; border-radius:9999px;
  background:rgba(255,255,255,.1); display:grid; place-items:center;
  color:#fff; font-size:18px;
}
.why-card h3{ font-size:15px; font-weight:700; color:#fff; }
.why-card p{ margin-top:6px; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.6); }

/* ============================================================
   STEP (이용 절차) — 5 카드
   ============================================================ */
.grid-step{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
@media (min-width:768px){ .grid-step{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.step-card{
  position:relative; background:#fff; border:1px solid #ebeef3; border-radius:14px;
  padding:26px 16px 22px; text-align:center; min-width:0;
  box-shadow:0 8px 24px rgba(20,26,46,.05); transition:transform .2s, box-shadow .2s;
}
.step-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(20,26,46,.1); }
.step-ic{ width:54px; height:54px; margin:0 auto; border-radius:9999px; display:grid; place-items:center; font-size:21px; }
.step-no{ display:block; margin-top:12px; font-size:24px; font-weight:800; color:#e7eaf0; line-height:1; }
.step-card h3{ margin-top:8px; font-size:17px; font-weight:800; color:var(--navy); }
.step-card p{ margin-top:7px; font-size:13px; line-height:1.5; color:#9aa3b2; }

/* ============================================================
   REVIEW 카드
   ============================================================ */
.reviewSwiper .swiper-slide{ height:auto; display:flex !important; }
.review-card{
  display:flex; flex-direction:column; width:100%;
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.review-card .rthumb{ aspect-ratio:16/10; overflow:hidden; }
.review-card .rthumb img{ width:100%; height:100%; object-fit:cover; }
.review-card .rbody{ padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; }
.review-stars{ color:#f5b400; font-size:13px; letter-spacing:1px; }
.review-card h3{ margin-top:8px; font-size:16px; font-weight:800; color:var(--navy); }
.review-card p{ margin-top:8px; font-size:13.5px; line-height:1.6; color:#5c6473; flex:1; }
.review-meta{ margin-top:14px; font-size:12.5px; color:#9aa3b2; }

/* ============================================================
   FAQ
   ============================================================ */
.grid-faq{ display:grid; grid-template-columns:minmax(0,1fr); gap:32px; }
.grid-faq>*{ min-width:0; }
@media (min-width:1024px){ .grid-faq{ grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:48px; } }
.faq-item{ border-bottom:1px solid #eef0f4; }
.faq-item:last-child{ border-bottom:0; }
.faq-q{
  width:100%; display:flex; align-items:center; gap:14px; text-align:left;
  padding:20px 22px; font-size:15.5px; font-weight:700; color:var(--navy);
  background:#fff; cursor:pointer; transition:background .15s;
}
.faq-q:hover{ background:#fafbfd; }
.faq-q .qmark{
  width:30px; height:30px; flex:none; border-radius:9999px; background:var(--blue);
  color:#fff; font-size:14px; font-weight:800; display:grid; place-items:center;
}
.faq-q .chev{ margin-left:auto; color:#aeb5c1; transition:transform .25s; }
.faq-item.open .faq-q .chev{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a .inner{ padding:0 22px 20px 66px; font-size:14px; line-height:1.7; color:#5c6473; }

/* ============================================================
   FLOATING / DRAWER
   ============================================================ */
.float-btn{
  width:48px; height:48px; border-radius:9999px; display:grid; place-items:center;
  font-size:18px; box-shadow:0 8px 22px rgba(20,26,46,.22); transition:transform .15s, opacity .2s;
}
.float-btn:hover{ transform:translateY(-3px); }
.drawer-link{
  display:flex; align-items:center; gap:14px; padding:13px 22px;
  font-size:15px; font-weight:600; color:#374151; transition:background .15s, color .15s;
}
.drawer-link i{ width:20px; text-align:center; font-size:16px; }
.drawer-link:hover{ background:#f5f7fa; color:var(--blue); }
body.no-scroll{ overflow:hidden; }

/* ============================================================
   FOOTER 패밀리사이트 SELECT (onchange 실제 이동)
   ============================================================ */
.family-select{
  appearance:none; cursor:pointer; height:36px; min-width:150px;
  padding:0 32px 0 12px; border:1px solid #d8dde6; border-radius:8px;
  background:#fff; color:#6b7280; font-size:13px; font-weight:600;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236b7280' d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center;
}
.family-select:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(55,114,232,.12); }

/* ============================================================
   ENTRY POPUP (PC·모바일 공용 반응형)
   ============================================================ */
.popup-overlay{
  position:fixed; inset:0; z-index:70; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(10,14,26,.6); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .25s;
  overflow-y:auto;
}
.popup-overlay.is-open{ display:flex; opacity:1; }
.popup-card{
  position:relative; width:100%; max-width:360px;
  background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.4);
  transform:translateY(16px) scale(.98); transition:transform .3s ease;
  margin:auto;
}
.popup-overlay.is-open .popup-card{ transform:translateY(0) scale(1); }
.popup-x{
  position:absolute; top:10px; right:10px; z-index:2;
  width:36px; height:36px; border-radius:9999px;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.18); color:#fff; font-size:17px;
  transition:background .15s;
}
.popup-x:hover{ background:rgba(255,255,255,.32); }
.popup-visual{
  padding:30px 26px 26px; color:#fff; text-align:center;
  background:linear-gradient(135deg,#3772e8 0%,#2a5fd0 60%,#1a2238 100%);
}
.popup-tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:9999px; font-size:12px; font-weight:700;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25);
}
.popup-visual h2{ margin-top:14px; font-size:23px; font-weight:800; line-height:1.3; }
.popup-visual p{ margin-top:10px; font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.85); }
.popup-visual p b{ color:#ffd95e; }
.popup-body{ padding:20px 24px 6px; }
.popup-list{ display:flex; flex-direction:column; gap:9px; }
.popup-list li{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:#374151; }
.popup-list li i{ color:var(--green); font-size:14px; }
.popup-cta{
  margin-top:18px; width:100%; height:50px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--blue); color:#fff; font-size:15px; font-weight:700;
  transition:background .15s, transform .1s;
}
.popup-cta:hover{ background:var(--blue-dark); }
.popup-cta:active{ transform:scale(.98); }
.popup-foot{
  margin-top:14px; padding:14px 24px; border-top:1px solid #eef0f4;
  display:flex; align-items:center; justify-content:space-between;
}
.popup-hide{ display:flex; align-items:center; gap:7px; font-size:13px; color:#6b7280; cursor:pointer; user-select:none; }
.popup-hide input{ width:15px; height:15px; accent-color:var(--blue); }
.popup-close-text{ font-size:13px; font-weight:600; color:#9aa3b2; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.popup-close-text:hover{ color:#374151; }
@media (max-width:360px){
  .popup-card{ max-width:none; border-radius:14px; }
  .popup-visual{ padding:26px 18px 22px; }
  .popup-visual h2{ font-size:20px; }
  .popup-body{ padding:16px 18px 4px; }
  .popup-foot{ padding:12px 18px; }
}