/* ============================================================
   home-renew.css — 홈(index.html) 리뉴얼 오버레이 (namespace 격리판)
   · 모든 규칙은 body.renewal-home 하위로만 적용된다.
   · 전역 element selector(svg/img/section/body/h1..) 사용 금지.
   · 기능/마크업/JS는 건드리지 않는 visual layer 전용.
   ============================================================ */

/* ── 0. 스프라이트 아이콘 하드 캡 (emoji 미사용, line icon 통일) ── */
.renewal-home .ico-svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px;
  max-height: 20px;
  min-width: 20px;
  min-height: 20px;
  flex: 0 0 auto;
  flex-shrink: 0;
  display: inline-block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
}
.renewal-home .nav-toggle { color: var(--n-7); line-height: 0; }
.renewal-home .nav-toggle .ico-svg { width: 22px !important; height: 22px !important; min-width: 22px; min-height: 22px; max-width: 22px; max-height: 22px; }
.renewal-home .float-badge .ico-svg { width: 16px !important; height: 16px !important; min-width: 16px; min-height: 16px; max-width: 16px; max-height: 16px; color: var(--brand); }
.renewal-home .step-card .ico .ico-svg { width: 22px !important; height: 22px !important; min-width: 22px; min-height: 22px; max-width: 22px; max-height: 22px; }

/* ============================================================
   1. 페이지 바탕 / 컨테이너
   ============================================================ */
.renewal-home { background: var(--n-0); }
.renewal-home .section { max-width: 1200px; padding: var(--sp-16) var(--sp-6) 0; }
.renewal-home .section:last-of-type { padding-bottom: var(--sp-16); }
.renewal-home .section > .sec-head { margin-bottom: var(--sp-7); }
.renewal-home .section .sec-eyebrow {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  color: var(--brand);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.renewal-home .section h2.sec-title {
  font-size: var(--fs-h3);
  color: var(--n-8);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-bold);
  margin: var(--sp-2) 0 var(--sp-3);
}
.renewal-home .section .sec-sub {
  color: var(--n-5);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  max-width: 720px;
}

/* ============================================================
   2. 헤더 — white / thin border / 넉넉한 메뉴 간격
   ============================================================ */
.renewal-home .topbar {
  background: var(--n-0);
  border-bottom: 1px solid var(--n-3);
  box-shadow: none;
  padding: 14px 28px;
}
.renewal-home .topbar .brand { color: var(--n-8); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); }
.renewal-home .topbar nav { gap: 4px; }
.renewal-home .topbar nav a {
  color: var(--n-6);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  padding: 8px 13px;
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.renewal-home .topbar nav a:hover { background: var(--sage-50); color: var(--brand-ink); }
.renewal-home .topbar nav a[aria-current="page"] {
  color: var(--brand);
  background: var(--sage-100);
  font-weight: var(--fw-bold);
}
.renewal-home .topbar .nav-right { gap: 14px; }
.renewal-home .topbar #authArea .btn { border-radius: var(--r-md); font-size: var(--fs-body-sm); }
.renewal-home .topbar #authArea .btn.primary { box-shadow: none; }
.renewal-home .topbar .nav-toggle { border-radius: var(--r-sm); }

/* ============================================================
   3. 히어로 — 좌 카피 / 우 캐릭터, white → mint 소프트 그라디언트
   ============================================================ */
/* 히어로 배경은 브랜드 첫인상을 만드는 핵심 asset 입니다.
   asset: /static/assets/hero/hero-meadow-1920.webp (1672x941, 16:9)
   - 이미지 우측 약 72% 지점에 마스코트가 들어있으므로 좌측 텍스트 영역과 겹치지 않습니다.
   - 그래서 별도 #mascotImg 는 홈 히어로에서 숨깁니다(중복 노출 방지). 마크업은 유지. */
.renewal-home .hero {
  background-color: var(--sage-50);
  background-image:
    linear-gradient(96deg,
      rgba(255,255,255,0.88) 0%,
      rgba(255,255,255,0.82) 28%,
      rgba(255,255,255,0.52) 42%,
      rgba(243,250,245,0.12) 56%,
      rgba(243,250,245,0) 70%),
    url("/static/assets/hero/hero-meadow-1920.webp");
  background-size: auto, cover;
  background-position: center, center bottom;
  background-repeat: no-repeat, no-repeat;
  border-bottom: 1px solid var(--sage-200);
}
.renewal-home .hero-blob { display: none !important; }

.renewal-home .hero-inner {
  max-width: 1200px;
  grid-template-columns: 1.02fr 0.98fr;
  gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-6) var(--sp-10);
  align-items: start;
  /* grid-template-rows 없음: 각 컬럼 콘텐츠 높이에 따름.
     hero-copy(텍스트) ≈ 350px, hero-visual(480px) → 큰 쪽(480) + padding 48+40 ≈ 568px. 목표 560~680 달성. */
}

/* live badge */
.renewal-home .eyebrow-live {
  background: var(--n-0);
  border: 1px solid var(--brand-line);
  color: var(--brand-ink);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  padding: 7px 15px 7px 12px;
  margin-bottom: var(--sp-5);
}
.renewal-home .eyebrow-live .dot-ping {
  animation: none !important;
  box-shadow: none !important;
  background: var(--brand) !important;
  width: 7px; height: 7px;
}
.renewal-home .eyebrow-live .dot-ping::before,
.renewal-home .eyebrow-live .dot-ping::after { display: none !important; }

.renewal-home .hero-copy h1 {
  font-size: clamp(2.1rem, 3.6vw, 3.25rem);
  line-height: 1.2;
  color: var(--n-8);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-black);
  margin-bottom: var(--sp-5);
}
.renewal-home .hero-copy h1 .accent { color: var(--brand); background: none; -webkit-text-fill-color: currentColor; }
.renewal-home .hero-copy p.lead {
  color: var(--n-6);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  max-width: 520px;
  margin-bottom: var(--sp-7);
}

.renewal-home .hero-ctas { gap: var(--sp-3); }
.renewal-home .hero-ctas .btn {
  border-radius: var(--r-lg);
  font-weight: var(--fw-semi);
  padding: 13px 24px;
}
.renewal-home .hero-ctas .btn.primary {
  background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: none;
}
.renewal-home .hero-ctas .btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.renewal-home .hero-ctas .btn:not(.primary) {
  background: var(--n-0); border-color: var(--brand-line); color: var(--brand-ink);
}
.renewal-home .hero-ctas .btn:not(.primary):hover { background: var(--sage-50); border-color: var(--brand); }

.renewal-home .hero-sell-note {
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--sage-200);
  border-radius: var(--r-md);
  color: var(--n-6);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  max-width: 560px;
}
.renewal-home .hero-sell-note strong { color: var(--n-8); }

.renewal-home .trust-dots { color: var(--n-6); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); }
.renewal-home .trust-dots .dot-stack i { background: var(--sage-200) !important; border-color: var(--n-0); }
.renewal-home .trust-dots .dot-stack i:first-child { background: var(--brand) !important; }
.renewal-home .trust-dots .dot-stack i:nth-child(2) { background: var(--accent-y) !important; }

/* ── 히어로 캐릭터 ──
   캐릭터는 CSS 도형이 아니라 반드시 이미지 asset 으로 교체 가능한 슬롯입니다.
   교체 시 index.html 의 #mascotImg 의 src 만 바꾸면 되고, 아래 규칙은
   프레임 크기 / 잔디 배경 / 잎 장식만 담당합니다. */
/* 캐릭터·잔디·꽃은 배경 이미지에 포함되어 있으므로 CSS 장식과 중복 캐릭터를 모두 끈다.
   #mascotImg 슬롯 자체는 index.html 에 그대로 남겨둔다(다른 용도/롤백 대비). */
.renewal-home .hero-visual { min-height: 480px; align-items: center; padding-bottom: 0; }
.renewal-home .mascot-frame { display: none; }
.renewal-home .hero-visual::after,
.renewal-home .hero-visual::before { content: none; }

.renewal-home .float-badge {
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--sage-200);
  border-radius: var(--r-pill);
  color: var(--n-7);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  box-shadow: var(--sh-2);
  animation: none !important;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  z-index: 3;
}
/* 배지는 캐릭터 얼굴을 가리지 않도록 비주얼 영역의 위/아래 모서리로 뺀다 */
.renewal-home .float-badge.badge-top { top: 6%; right: 0; }
.renewal-home .float-badge.badge-bottom { bottom: 10%; left: 0; right: auto; }

/* ============================================================
   4. 실시간 시세 ticker — 옅은 mint/sage, compact
   ============================================================ */
.renewal-home .ticker-bar {
  background: var(--sage-50);
  color: var(--n-7);
  border-top: 1px solid var(--sage-200);
  border-bottom: 1px solid var(--sage-200);
}
.renewal-home .ticker-head {
  color: var(--n-6);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps);
  padding-top: 10px;
}
.renewal-home .ticker-head .dot { color: var(--brand); animation: none !important; }
.renewal-home .ticker-track-wrap { padding: 4px 0 10px; }
.renewal-home .ticker-track { gap: 40px; }
.renewal-home .tick-item {
  color: var(--n-7);
  font-size: var(--fs-body-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.renewal-home .tick-item .nm { color: var(--n-6); font-weight: var(--fw-medium); }
.renewal-home .tick-item .pr {
  color: var(--n-8);
  font-weight: var(--fw-bold);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.renewal-home .tick-item .up { color: var(--brand); }
.renewal-home .tick-item .down { color: var(--danger); }
/* 실제 시세 항목이 하나도 없으면 티커 자체를 숨긴다 (가짜 데이터 노출 금지) */
.renewal-home .ticker-bar:has(#tickerTrack:empty) { display: none; }

/* ============================================================
   5. 카드 공통 — border 중심, shadow 아주 약하게
   ============================================================ */
.renewal-home .about-card,
.renewal-home .guide-card,
.renewal-home .step-card,
.renewal-home .review-card,
.renewal-home .faq-item {
  background: var(--n-0);
  border: 1px solid var(--n-3);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.renewal-home .about-card:hover,
.renewal-home .guide-card:hover,
.renewal-home .step-card:hover,
.renewal-home .review-card:hover {
  transform: translateY(-2px);
  border-color: var(--sage-200);
  box-shadow: var(--sh-2);
}

/* ── 5-1. ABOUT / 핵심 서비스 4카드 ── */
.renewal-home .about-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.renewal-home .about-card { padding: var(--sp-6) var(--sp-5) var(--sp-5); gap: var(--sp-3); }
.renewal-home .about-ico {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sage-100);
  border: 0;
  border-radius: var(--r-md);
  color: var(--brand);
  margin-bottom: var(--sp-2);
}
.renewal-home .about-ico svg { width: 21px; height: 21px; }
.renewal-home .about-card h3 {
  font-size: var(--fs-h4);
  color: var(--n-8);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-bold);
  margin: 0;
}
.renewal-home .about-card p {
  color: var(--n-6);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  margin: 0;
}
.renewal-home .about-card .about-note { color: var(--n-5); font-size: var(--fs-micro); }
.renewal-home .about-acts { margin-top: auto; padding-top: var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.renewal-home .about-acts .btn {
  border-radius: var(--r-md);
  font-size: var(--fs-caption);
  padding: 9px 16px;
  box-shadow: none;
}
.renewal-home .about-acts .btn.primary { background: var(--brand); border-color: var(--brand); }
.renewal-home .about-acts .btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.renewal-home .about-acts .btn:not(.primary) { background: var(--n-0); border-color: var(--brand-line); color: var(--brand-ink); }

/* ── 5-2. 이용방법 가이드 grid (4 / 2 / 1열) ── */
.renewal-home .guide-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.renewal-home .guide-card { padding: var(--sp-5); }
.renewal-home .guide-card .step-no {
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  background: var(--sage-100);
  color: var(--brand-ink);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
  margin-bottom: var(--sp-3);
}
.renewal-home .guide-card h3 { font-size: var(--fs-body); color: var(--n-8); font-weight: var(--fw-bold); margin-bottom: var(--sp-2); }
.renewal-home .guide-card p { color: var(--n-6); font-size: var(--fs-caption); line-height: var(--lh-body); }
.renewal-home .guide-card .guide-link {
  color: var(--brand); font-weight: var(--fw-semi); font-size: var(--fs-caption); margin-top: var(--sp-3);
}
.renewal-home .guide-card .guide-link::after { content: " →"; }

/* ── 5-3. 혜택 — 3개의 넓은 horizontal card ── */
.renewal-home .steps-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.renewal-home .step-card {
  padding: var(--sp-6);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.renewal-home .step-card .ico {
  font-size: 0;
  width: 44px; height: 44px;
  flex: 0 0 44px;
  background: var(--sage-100);
  border: 0;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  margin: 0;
}
.renewal-home .step-card h3 {
  flex: 1 1 100%;
  order: 2;
  font-size: var(--fs-body);
  color: var(--n-8);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--sp-2);
}
.renewal-home .step-card p { flex: 1 1 100%; order: 3; color: var(--n-6); font-size: var(--fs-caption); line-height: var(--lh-body); }
@media (min-width: 861px) {
  .renewal-home .step-card { align-items: center; }
  .renewal-home .step-card h3 { flex: 1 1 auto; order: 0; margin: 0 0 4px; }
  .renewal-home .step-card p { flex: 1 1 100%; order: 3; margin-left: 60px; }
}

/* ── 5-4. FAQ — compact accordion ── */
.renewal-home .faq-toolbar { gap: var(--sp-3); margin-top: var(--sp-2); }
.renewal-home #faqSearch {
  border: 1px solid var(--n-3);
  border-radius: var(--r-md);
  padding: 11px 14px;
  font-size: var(--fs-body-sm);
  background: var(--n-0);
  color: var(--n-8);
  max-width: 100%;
}
.renewal-home #faqSearch:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); }
.renewal-home .faq-cats button {
  border: 1px solid var(--n-3);
  background: var(--n-0);
  border-radius: var(--r-sm);
  padding: 7px 14px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--n-6);
}
.renewal-home .faq-cats button:hover { background: var(--sage-50); border-color: var(--brand-line); color: var(--brand-ink); }
.renewal-home .faq-cats button.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.renewal-home .faq-list { gap: var(--sp-2); }
.renewal-home .faq-item { padding: 0; border-radius: var(--r-md); box-shadow: none; }
.renewal-home .faq-item:hover { transform: none; }
.renewal-home .faq-item summary {
  padding: 15px 18px;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semi);
  color: var(--n-8);
}
.renewal-home .faq-item[open] { border-color: var(--brand-line); background: var(--n-0); }
.renewal-home .faq-item[open] summary { color: var(--brand-ink); border-bottom: 1px solid var(--n-3); }
.renewal-home .faq-item .chev { color: var(--n-5); font-size: 0.9rem; transition: transform var(--dur) var(--ease); }
.renewal-home .faq-item p { padding: 14px 18px; margin: 0; color: var(--n-6); font-size: var(--fs-caption); line-height: var(--lh-body); }
.renewal-home .faq-item p a { color: var(--brand); font-weight: var(--fw-semi); }

/* ── 5-5. 후기 / 공지 패널 ── */
.renewal-home #reviews .split-2 { gap: var(--sp-5); }
.renewal-home #reviews .split-2 > div {
  background: var(--sage-50);
  border: 1px solid var(--sage-200);
  border-radius: var(--r-xl);
  padding: var(--sp-7) var(--sp-6);
}
.renewal-home #reviews .split-2 > div > .sec-head { margin-bottom: var(--sp-5); }
.renewal-home .review-card { padding: var(--sp-4) var(--sp-5); box-shadow: none; }
.renewal-home .review-card .stars { color: var(--accent-y); }
.renewal-home .review-card .meta { color: var(--n-5); font-size: var(--fs-micro); }
.renewal-home .ann-item { border-bottom: 1px solid var(--sage-200); }
.renewal-home .ann-item .ttl { color: var(--n-8); font-size: var(--fs-body-sm); }
.renewal-home .ann-item .pin {
  background: var(--accent-y-weak); color: var(--warn); border-radius: var(--r-xs); font-size: var(--fs-micro);
}
/* 데이터가 없을 때의 안내 (가짜 후기/공지 생성 금지) */
.renewal-home .empty-note {
  border: 1px dashed var(--n-4);
  border-radius: var(--r-md);
  background: var(--n-0);
  color: var(--n-5);
  font-size: var(--fs-caption);
  padding: var(--sp-6);
  text-align: center;
}

/* ============================================================
   6. 버튼 공통 — pill 금지, radius 8~12px
   ============================================================ */
.renewal-home .btn { border-radius: var(--r-md); font-weight: var(--fw-semi); }
.renewal-home .btn.primary { box-shadow: none; }

/* ============================================================
   7. 푸터
   ============================================================ */
.renewal-home .site-footer { background: var(--n-1); border-top: 1px solid var(--n-3); }
.renewal-home .site-footer .links a { color: var(--n-7); font-weight: var(--fw-semi); font-size: var(--fs-body-sm); }
.renewal-home .site-footer .links a:hover { color: var(--brand); }
.renewal-home .site-footer .biz { color: var(--n-5); font-size: var(--fs-micro); line-height: 1.9; }

/* ============================================================
   8. 카카오톡 문의 버튼 — 본문/CTA를 가리지 않게
   ============================================================ */
/* 크기·반경·아이콘 크기는 site.css 공통 규칙을 따릅니다.
   여기서는 그림자/굵기 같은 톤만 조정합니다. */
.renewal-home .floating-kakao-button {
  box-shadow: var(--sh-2);
  font-weight: var(--fw-semi);
}

/* ============================================================
   9. 숫자 정렬
   ============================================================ */
.renewal-home .stat-value,
.renewal-home .num,
.renewal-home .price,
.renewal-home .amount,
.renewal-home .fee { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ============================================================
   10. 반응형
   ============================================================ */
@media (max-width: 1080px) {
  .renewal-home .about-grid { grid-template-columns: repeat(2, 1fr); }
  .renewal-home .guide-grid { grid-template-columns: repeat(2, 1fr); }
  .renewal-home .steps-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* 모바일에서는 히어로 전체를 cover 로 깔면 캐릭터가 잘리므로,
     배경 이미지를 비주얼 영역 전용 밴드로 내리고 비율 그대로(contain) 보여준다. */
  .renewal-home .hero {
    background-image: none;
    background-color: var(--n-0);
  }
  .renewal-home .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
    min-height: 0;
  }
  .renewal-home .hero-copy { display: contents; }

  .renewal-home .hero-copy .eyebrow-live { order: 1; margin-bottom: var(--sp-3); }
  .renewal-home .hero-copy h1            { order: 2; margin-bottom: var(--sp-2); }
  .renewal-home .hero-copy p.lead        { order: 3; margin-bottom: 14px; }
  .renewal-home .hero-visual             { order: 4; margin-bottom: 14px; }
  .renewal-home .hero-ctas               { order: 5; }
  .renewal-home .trust-dots              { order: 6; margin-top: var(--sp-3); }

  /* 이미지 높이 170~220px. clamp 로 고정값을 피하되 계산 가능한 높이라 CLS 없음. */
  .renewal-home .hero-visual {
    height: clamp(170px, 42vw, 220px);
    aspect-ratio: auto;
    background-size: contain;  /* 캐릭터 비율 유지, 잘리지 않게 */
    background-position: center center;
  }
  .renewal-home .hero-copy h1 { font-size: clamp(1.85rem, 7.5vw, 2.4rem); }
  .renewal-home .hero-copy p.lead { font-size: var(--fs-body); }
  .renewal-home .hero-ctas { flex-wrap: wrap; }
  .renewal-home .hero-ctas .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
  .renewal-home .hero-visual {
    /* 순서는 아래 '히어로 재정렬' 블록에서 order 로 지정합니다. */
    min-height: 0;
    /* 100vw 는 세로 스크롤바 폭을 포함해 가로 오버플로를 만듭니다.
       컨테이너 좌우 패딩(--sp-5)만큼만 음수 마진으로 bleed 합니다. */
    width: auto;
    margin-left: calc(var(--sp-5) * -1);
    margin-right: calc(var(--sp-5) * -1);
    background-image: url("/static/assets/hero/hero-meadow-900.webp");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 0;
  }
  .renewal-home .float-badge { font-size: var(--fs-micro); padding: 6px 12px; }
  .renewal-home .float-badge.badge-top { top: 6%; right: 4%; }
  .renewal-home .float-badge.badge-bottom { bottom: 8%; left: 4%; }

  .renewal-home .section { padding: var(--sp-12) var(--sp-5) 0; }
  .renewal-home .section h2.sec-title { font-size: var(--fs-h4); }
  .renewal-home .about-grid { grid-template-columns: 1fr; }
  .renewal-home .guide-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .renewal-home .guide-card { padding: var(--sp-4); }
  .renewal-home #reviews .split-2 > div { padding: var(--sp-5) var(--sp-4); }

  /* 카카오톡 버튼 크기/위치는 site.css의 공통 규칙이 담당합니다.
     (예전에는 여기서 height:40px·padding을 덮어써서 52x52 아이콘형이 깨졌습니다) */
  .renewal-home .floating-kakao-button {
    top: auto !important;
    transform: none !important;
  }
}

@media (max-width: 420px) {
  .renewal-home .guide-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   11. 모바일 반응형 정리 (배경 띠 제거 + 길이 단축)
   ============================================================ */
@media (max-width: 860px) {
  /* 배경 띠 원인 제거:
     #reviews .split-2 > div 가 sage 배경 + 좌우 흰 거터라서 모바일에서
     "양쪽 민트 띠"로 보였습니다. 모바일에서는 틴트를 걷고 흰 카드 + 보더로
     통일해 body 배경과 이어지게 합니다. */
  .renewal-home #reviews .split-2 > div {
    background: var(--n-0);
    border: 1px solid var(--n-3);
  }
  /* 섹션 배경을 body와 동일하게 유지해 좌우/하단 띠가 생기지 않게 합니다 */
  .renewal-home .section { background: transparent; }

  /* 서비스 카드 2열 */
  .renewal-home .about-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .renewal-home .about-card { padding: var(--sp-4); }
  .renewal-home .about-card p { font-size: var(--fs-caption); }

  /* 혜택 카드 간격 축소 */
  .renewal-home .steps-grid { grid-template-columns: 1fr; gap: var(--sp-3); }

  /* 섹션 상하 여백 축소 — 전체 길이 단축에 가장 크게 기여 */
  .renewal-home .section { padding-top: var(--sp-10); }
  .renewal-home .section > h2 { margin-bottom: var(--sp-2); }
  .renewal-home .section > p.lead { margin-bottom: var(--sp-5); }
}

/* 서비스 카드는 320px에서도 2열을 유지합니다(길이 단축 목적).
   내부 텍스트만 축소해 2열이 깨지지 않게 합니다. */
@media (max-width: 420px) {
  .renewal-home .about-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .renewal-home .about-card { padding: var(--sp-3); }
  .renewal-home .about-card h3 { font-size: var(--fs-body-sm); }
  .renewal-home .about-card p { font-size: var(--fs-micro); }
}

/* ── 모바일 길이 추가 단축 (목표 40~55%) ────────────────────────────────
   콘텐츠는 그대로 두고 여백/카드 내부 밀도만 조정합니다. */
@media (max-width: 860px) {
  .renewal-home .section { padding-top: var(--sp-8); }
  .renewal-home .section:last-of-type { padding-bottom: var(--sp-8); }

  /* 히어로: 상하 여백 축소 */
  .renewal-home .hero-inner { padding-top: var(--sp-6); gap: var(--sp-4); }
  .renewal-home .hero-copy h1 { margin-bottom: var(--sp-3); }
  .renewal-home .hero-copy p.lead { margin-bottom: var(--sp-4); }
  .renewal-home .hero-sell-note { padding: var(--sp-3); }

  /* 혜택 카드: 아이콘/텍스트 밀도 상향 */
  .renewal-home .step-card { padding: var(--sp-4); gap: var(--sp-3); }
  .renewal-home .step-card h3 { font-size: var(--fs-body-sm); margin-bottom: 2px; }
  .renewal-home .step-card p { font-size: var(--fs-caption); }

  /* 이용방법 카드 밀도 */
  .renewal-home .guide-card { padding: var(--sp-3); }
  .renewal-home .guide-card p { font-size: var(--fs-micro); }

  /* 후기/공지 패널 밀도 */
  .renewal-home #reviews .split-2 { gap: var(--sp-3); }
  .renewal-home #reviews .split-2 > div { padding: var(--sp-4); }
}


/* =============================================================================
   12. 모바일 히어로 재정렬 (2026-08)
   문제: hero-copy(제목+설명+CTA 3개+긴 안내문단+trust-dots)가 통째로 먼저 오고
        hero-visual 이 그 뒤에 와서, 모바일 첫 viewport 에서 콩이 이미지가
        스크롤해야 보였습니다. 고정 높이로 자르지 않고 DOM(안내문단 분리) +
        flex order 로 실제 순서를 바꿉니다.
   ========================================================================== */
@media (max-width: 640px) {
  /* hero-copy 를 display:contents 로 풀어 자식들을 hero-inner 의 flex item 으로
     끌어올려야 hero-visual 과 한 줄로 섞어서 정렬할 수 있습니다. */
  .renewal-home .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
  }
  .renewal-home .hero-copy { display: contents; }

  .renewal-home .hero-copy .eyebrow-live { order: 1; margin-bottom: var(--sp-3); }
  .renewal-home .hero-copy h1            { order: 2; margin-bottom: var(--sp-2); }
  .renewal-home .hero-copy p.lead        { order: 3; margin-bottom: 14px; }
  .renewal-home .hero-visual             { order: 4; margin-bottom: 14px; }
  .renewal-home .hero-ctas               { order: 5; }
  .renewal-home .trust-dots   { order: 6; margin-top: var(--sp-3); }

  /* 이미지 높이 160~210px. clamp 로 고정값을 피하되 계산 가능한 높이라 CLS 없음. */
  .renewal-home .hero-visual {
    height: clamp(160px, 46vw, 210px);
    aspect-ratio: auto;
  }

  /* 첫 화면 확보를 위해 상단 요소 압축 */
  .renewal-home .hero-copy h1 { font-size: clamp(1.6rem, 6.6vw, 2rem); line-height: 1.22; }
  .renewal-home .hero-copy p.lead { font-size: var(--fs-body-sm); line-height: 1.5; }

  /* CTA: 기본 1개 full + 보조 2개 가로 2열 */
  .renewal-home .hero-ctas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
  }
  .renewal-home .hero-ctas .btn { flex: none; width: 100%; min-width: 0; justify-content: center; }
  .renewal-home .hero-ctas .btn.primary { grid-column: 1 / -1; }
  .renewal-home .hero-ctas .btn:not(.primary) {
    font-size: var(--fs-body-sm);
    padding-left: var(--sp-2);
    padding-right: var(--sp-2);
    white-space: nowrap;
  }

  /* 티커는 이미지·CTA 바로 아래에 붙입니다 */
  .renewal-home .ticker-bar { margin-top: 0; }
}

/* 히어로에서 분리한 안내 섹션 */
.sell-note-section { padding: var(--sp-6) var(--sp-6) 0; }
.sell-note-inner { max-width: 1200px; margin: 0 auto; }
.sell-note-section .hero-sell-note { margin: 0; }
@media (max-width: 640px) {
  .sell-note-section { padding: var(--sp-5) var(--sp-5) 0; }
  .sell-note-section .hero-sell-note { font-size: var(--fs-micro); line-height: 1.55; }
}


/* 헤더 줄바꿈 원인 수정 (2026-08)
   home.css 가 site.css 보다 뒤에 로드되면서 @media(max-width:900px) 안의
   `header.topbar { flex-wrap: wrap }` 가 site.css 의 nowrap 을 덮어써서,
   320px 에서 햄버거가 두 번째 줄로 내려가 헤더 밖(y=58~102)으로 삐져나왔습니다.
   가장 마지막에 로드되는 이 파일에서 되돌립니다. */
@media (max-width: 860px) {
  .renewal-home header.topbar { flex-wrap: nowrap; gap: 6px; row-gap: 0; }
}
@media (max-width: 360px) {
  .renewal-home header.topbar { padding-left: 10px; padding-right: 10px; gap: 4px; }
  .renewal-home header.topbar .brand { font-size: 0.9rem; }
  .renewal-home header.topbar .brand .brand-logo { width: 24px; height: 24px; }
  .renewal-home header.topbar #authArea { gap: 4px; }
  .renewal-home header.topbar #authArea .btn { font-size: 0.76rem; padding: 0 8px; }
}