/* ===== hero-redesign.css — 지역/인덱스 히어로 리디자인 (단색·검증가격·우리자산) ===== */
/* 2026-06 적용. 지역 텍스트(h1·지역 p)는 건드리지 않고 주변 요소만 추가. */

/* ── 배지·가격 콜아웃·2번째 CTA (단색·검증가격) ── */
.rd-hero-badge { display:inline-flex; align-items:center; gap:6px; background:#FFC400;
  color:#1f2937; font-weight:900; font-size:13px; padding:6px 14px; border-radius:999px;
  margin-bottom:14px; text-shadow:none; white-space:nowrap; max-width:100%; }
/* 배지(라벨)는 인덱스에서만 표시 — 지역 페이지는 전 화면에서 숨김 */
body:not(.index-page) .rd-hero-badge { display:none !important; }
.rd-hero-price { display:inline-block; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.4); border-radius:14px; padding:11px 18px;
  margin:4px 0 18px; text-shadow:none; }
.rd-hero-price__label { display:block; font-size:12.5px; color:#e6eaf7; margin-bottom:3px; font-weight:600; }
.rd-hero-price__row { display:flex; align-items:baseline; gap:8px; }
.rd-hero-price__was { font-size:13px; color:#c6cce4; text-decoration:line-through; }
.rd-hero-price__now { font-size:30px; font-weight:900; color:#FFC400; line-height:1; }
.rd-hero-price__per { font-size:15px; font-weight:700; color:#e6eaf7; }
.rd-hero-cta { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.rd-hero-callbtn { display:inline-flex; align-items:center; gap:6px; background:#fff;
  color:#1E40AF; font-weight:800; padding:11px 20px; border-radius:10px;
  text-shadow:none; border:2px solid #fff; }
@media (max-width:768px){
  .rd-hero-badge{ font-size:11px; padding:5px 11px; margin-bottom:10px; }
  .rd-hero-price{ padding:9px 13px; margin:2px 0 12px; display:inline-block;
    background:rgba(13,20,48,.82); border-color:rgba(255,255,255,.28); }
  .rd-hero-price__now{ font-size:23px; }
  .rd-hero-price__label{ font-size:11px; }
  .rd-hero-callbtn{ padding:9px 16px; font-size:0.9rem; }
  /* 모바일: 왼쪽 정렬만 (텍스트 폭은 자연스럽게 유지) */
  .hero .hero-content, .hero .hero-content-container{ text-align:left !important; }
  .rd-hero-cta{ justify-content:flex-start; }
}

/* ── 단색 배경 + 우측 3D 캐릭터 + 아래에서 라이즈업 ── */
.hero { background-image:none !important; background-color:#1E40AF !important; overflow:hidden; }
.hero .container { position:relative; z-index:3; }
.rd-hero-3d { position:absolute; right:5%; bottom:0; height:480px; max-height:96%;
  object-fit:contain; z-index:2; pointer-events:none;
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.35));
  animation: rdRiseUp .9s cubic-bezier(.2,.7,.3,1) both; }
@keyframes rdRiseUp { from{opacity:0; transform:translateY(70px);}
  to{opacity:1; transform:translateY(0);} }

/* 혜택 이미지(우리 자산) — 뒤에서 바닥→위로 끊임없이 올라오는 무한 흐름 + 회전 */
.rd-hero-deco { position:absolute; top:-20px; z-index:1; pointer-events:none;
  opacity:0; filter: drop-shadow(0 8px 14px rgba(0,0,0,.22));
  animation: rdFallLoop 6s linear infinite; }
@keyframes rdFallLoop {
  0%   { transform: translate(0,-70px) scale(.9) rotate(0deg); opacity:0; }
  10%  { opacity: var(--peak, .85); }
  50%  { transform: translate(18px,240px) scale(1) rotate(180deg); }
  85%  { opacity: var(--peak, .85); }
  100% { transform: translate(0,560px) scale(1) rotate(360deg); opacity:0; }
}
@keyframes rdFallLoopCCW {
  0%   { transform: translate(0,-70px) scale(.9) rotate(0deg); opacity:0; }
  10%  { opacity: var(--peak, .85); }
  50%  { transform: translate(-18px,240px) scale(1) rotate(-180deg); }
  85%  { opacity: var(--peak, .85); }
  100% { transform: translate(0,560px) scale(1) rotate(-360deg); opacity:0; }
}
/* 데스크탑: 히어로 전체 폭으로 좌→우 고르게 분산 */
/* 입체감: 큰 건 가깝게(빠르게·진하게) / 작은 건 멀게(느리게·흐리게) */
.rd-deco-1{ width:122px; left:2%;  animation-duration:4.8s; animation-delay:0s;   --peak:.95; }
.rd-deco-2{ width:62px;  left:15%; animation-duration:8.6s; animation-delay:-1.2s; --peak:.55; }
.rd-deco-3{ width:104px; left:27%; animation-duration:5.6s; animation-delay:-2.4s; --peak:.9; }
.rd-deco-4{ width:52px;  left:38%; animation-duration:9.2s; animation-delay:-3.6s; --peak:.5; }
.rd-deco-5{ width:88px;  left:50%; animation-duration:6.4s; animation-delay:-4.6s; --peak:.8; }
.rd-deco-6{ width:130px; left:62%; animation-duration:4.6s; animation-delay:-2s;   --peak:.95; }
.rd-deco-7{ width:58px;  left:74%; animation-duration:8.9s; animation-delay:-3.1s; --peak:.52; }
.rd-deco-8{ width:98px;  left:84%; animation-duration:5.8s; animation-delay:-1.7s; --peak:.85; }
.rd-deco-9{ width:48px;  left:92%; animation-duration:9.6s; animation-delay:-4s;   --peak:.46; }
.rd-deco-2, .rd-deco-4, .rd-deco-6, .rd-deco-8 { animation-name: rdFallLoopCCW; }
/* 데스크탑: 콘텐츠 세로 간격 축소 — 히어로 상단 붙음 방지(중앙 여백 확보) */
@media (min-width:769px){
  /* 고정 헤더(약 81px)가 히어로 상단을 덮어 텍스트·매니저가 가려지는 문제 → 히어로를 헤더 높이만큼 아래로 */
  .hero { margin-top: 84px !important; }
  .hero .hero-content h1 { margin-bottom: 10px !important; }
  .hero .hero-content p  { margin-bottom: 12px !important; }
  .rd-hero-price { margin: 2px 0 10px; padding: 10px 16px; }
  .rd-hero-price__now { font-size: 27px; }
}

/* 모바일: 큰 캐릭터 숨김, 혜택 이미지 전체 폭에 작게 계속 상승 */
@media (max-width:768px){
  .rd-hero-3d { display:none !important; }
  /* 모바일도 입체감(큰/작은) 유지 + 데스크탑처럼 천천히 */
  .rd-deco-1{ width:62px; left:2%;  animation-duration:7.2s;  --peak:.95; }
  .rd-deco-2{ width:32px; left:15%; animation-duration:11s;   --peak:.55; }
  .rd-deco-3{ width:52px; left:27%; animation-duration:8.2s;  --peak:.9; }
  .rd-deco-4{ width:28px; left:38%; animation-duration:11.6s; --peak:.5; }
  .rd-deco-5{ width:44px; left:50%; animation-duration:9.2s;  --peak:.8; }
  .rd-deco-6{ width:66px; left:62%; animation-duration:6.9s;  --peak:.95; }
  .rd-deco-7{ width:30px; left:74%; animation-duration:11.3s; --peak:.52; }
  .rd-deco-8{ width:50px; left:84%; animation-duration:8.4s;  --peak:.85; }
  .rd-deco-9{ width:26px; left:92%; animation-duration:12s;   --peak:.46; }
  /* 모바일: 두 CTA를 동일 폭으로 항상 한 줄에 나란히 (전 페이지 일관) */
  .rd-hero-cta { flex-wrap:nowrap; }
  .rd-hero-cta > .button, .rd-hero-cta > .rd-hero-callbtn {
    flex:1 1 0; min-width:0; justify-content:center; text-align:center;
    padding-left:8px; padding-right:8px; white-space:nowrap; }
}