/* 히어로 슬라이드 배너 (영상 위, 위에서 내려오는 팝업형) — 모든 클래스는 sw-hero 접두 */
.hero .sw-hero{
  --sw-gold:var(--sw-gold-300);--sw-gold-dark:var(--sw-gold-300);--sw-gold-light:var(--sw-gold-300);
  --sw-ink:var(--sw-text);--sw-sub:var(--sw-text-muted);--sw-brown:var(--sw-gold-600);--sw-navy:var(--sw-navy-900);--sw-navy-2:var(--sw-navy-900);--sw-mint-text:var(--sw-text-on-dark);
  position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  font-family:var(--sw-font);line-height:1.6;
}
.hero .sw-hero.is-closed{display:none}

/* 배너 본체 */
.hero .sw-hero__inner{
  position:relative;pointer-events:auto;width:calc(100% - 40px);max-width:1100px;margin-top:104px;
  background:linear-gradient(120deg,var(--sw-navy-2),var(--sw-navy));
  box-shadow:var(--sw-shadow-lg);
  animation:swHeroDrop .6s cubic-bezier(.2,.8,.2,1);
  transition:transform .45s ease,opacity .35s ease;
}
.hero .sw-hero.is-away .sw-hero__inner{transform:translateY(-130%);opacity:0;pointer-events:none}
@keyframes swHeroDrop{from{transform:translateY(-140%);opacity:0}to{transform:none;opacity:1}}

.hero .sw-hero__track{min-height:300px;display:flex}
.hero .sw-hero__slide{display:none;width:100%}
.hero .sw-hero__slide.is-active{display:flex;align-items:stretch;animation:swHeroIn .45s ease-out}
@keyframes swHeroIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 왼쪽 흰 영역 (오른쪽이 둥글게 파고듦) */
.hero .sw-hero__card{
  flex:0 0 50%;min-width:0;background:var(--sw-surface);padding:48px 8% 48px 48px;
  border-radius:0 50% 50% 0 / 0 50% 50% 0;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
}
.hero .sw-hero__eyebrow{margin:0 0 8px;font-size:16px;font-weight:700;color:var(--sw-brown)}
.hero .sw-hero__title{margin:0 0 8px;font-size:32px;line-height:1.2;font-weight:800;letter-spacing:-.02em;word-break:keep-all;color:var(--sw-ink)}
.hero .sw-hero__title em{font-style:normal;color:var(--sw-orange-600)}
.hero .sw-hero__desc{margin:0 0 24px;font-size:16px;color:var(--sw-sub);word-break:keep-all}
.hero .sw-hero__btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 32px;border-radius:var(--sw-radius-pill);background:var(--sw-orange-600);color:var(--sw-text-on-dark);font-weight:700;font-size:18px;text-decoration:none;transition:background .2s}
.hero .sw-hero__btn:hover{background:var(--sw-orange-700)}
.hero .sw-hero__btn:focus-visible{outline:3px solid var(--sw-navy);outline-offset:3px}

/* 오른쪽 큰 숫자 */
.hero .sw-hero__figure{flex:1 1 0;min-width:0;padding:32px 64px 32px 16px;color:var(--sw-text-on-dark);text-align:right;display:flex;flex-direction:column;justify-content:center;align-items:flex-end}
.hero .sw-hero__lead{font-size:18px;font-weight:700;color:var(--sw-mint-text)}
.hero .sw-hero__num{display:block;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--sw-gold-light);font-size:48px}
.hero .sw-hero__num--xl{font-size:48px}
.hero .sw-hero__badge{display:inline-block;margin-top:8px;padding:4px 16px;border-radius:var(--sw-radius-pill);background:var(--sw-surface);color:var(--sw-navy);font-size:16px;font-weight:700}
.hero .sw-hero__caption{margin:16px 0 0;font-size:16px;color:var(--sw-mint-text)}

/* 닫기(X) — 오른쪽 위 */
.hero .sw-hero__close{position:absolute;top:0;right:0;z-index:3;width:44px;height:44px;border:0;background:rgba(0,0,0,.55);color:var(--sw-text-on-dark);cursor:pointer;display:flex;align-items:center;justify-content:center}
.hero .sw-hero__close:hover{background:rgba(0,0,0,.75)}
.hero .sw-hero__close:focus-visible{outline:2px solid var(--sw-surface);outline-offset:-4px}

/* 컨트롤 바 (배너 아래쪽) */
.hero .sw-hero__controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 48px;background:rgba(9,32,55,.55)}
.hero .sw-hero__nav{width:40px;height:40px;border-radius:var(--sw-radius-pill);border:1px solid rgba(255,255,255,.5);background:transparent;color:var(--sw-text-on-dark);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-family:inherit}
.hero .sw-hero__nav:hover{background:rgba(255,255,255,.16)}
.hero .sw-hero__nav--text{width:auto;padding:0 16px;font-size:14px;font-weight:700}
.hero .sw-hero__nav:focus-visible,.hero .sw-hero__dot:focus-visible{outline:2px solid var(--sw-surface);outline-offset:2px}
.hero .sw-hero__dots{display:flex}
.hero .sw-hero__dot{width:40px;height:40px;border:0;background:transparent;cursor:pointer;padding:0;position:relative}
.hero .sw-hero__dot::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:var(--sw-radius-pill);background:rgba(255,255,255,.55);transition:all .25s}
.hero .sw-hero__dot.is-active::after{width:26px;margin-left:-16px;background:var(--sw-gold-light)}

@media(max-width:760px){
  .hero .sw-hero__inner{margin-top:96px;width:calc(100% - 24px)}
  .hero .sw-hero__track{min-height:0}
  .hero .sw-hero__slide.is-active{flex-direction:column}
  .hero .sw-hero__card{flex:none;border-radius:0 0 50% 50% / 0 0 24px 24px;padding:32px 24px 32px}
  .hero .sw-hero__title{font-size:20px}
  .hero .sw-hero__figure{align-items:flex-start;text-align:left;padding:24px 24px 24px}
  .hero .sw-hero__num{font-size:48px}
  .hero .sw-hero__num--xl{font-size:48px}
  .hero .sw-hero__controls{padding:4px 16px}
}

/* 1번 슬라이드: 전체 장례비용 대비 상조 비중 막대 그래프 */
.hero .sw-hero__chart{width:100%;max-width:440px}
.hero .sw-hero__chart-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:8px;font-size:18px;font-weight:700;color:var(--sw-mint-text)}
.hero .sw-hero__chart-top b{font-size:clamp(32px,4.4vw,48px);font-weight:800;letter-spacing:-.02em;color:var(--sw-gold-light);margin-left:8px}
.hero .sw-hero__chart-total{font-size:14px;font-weight:500;opacity:.85}
.hero .sw-hero__bar{display:flex;height:54px;border-radius:var(--sw-radius-sm);overflow:hidden;background:rgba(255,255,255,.14)}
.hero .sw-hero__seg{display:block;height:100%;transform-origin:left center}
.hero .sw-hero__seg--core{width:20%;background:var(--sw-gold-light)}
.hero .sw-hero__seg--range{width:10%;background:repeating-linear-gradient(135deg,var(--sw-gold-light) 0 5px,rgba(241,217,168,.45) 5px 10px)}
.hero .sw-hero__seg--rest{width:70%;background:rgba(255,255,255,.14)}
.hero .sw-hero__slide.is-active .sw-hero__seg{animation:swHeroGrow .9s cubic-bezier(.2,.8,.2,1) both}
.hero .sw-hero__slide.is-active .sw-hero__seg--range{animation-delay:.25s}
.hero .sw-hero__slide.is-active .sw-hero__seg--rest{animation-delay:.4s}
@keyframes swHeroGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero .sw-hero__chart-bottom{display:flex;margin-top:8px;font-size:14px;line-height:1.2;color:var(--sw-mint-text)}
.hero .sw-hero__chart-bottom span:first-child{flex:0 0 30%;font-weight:700;color:var(--sw-gold-light);text-align:left}
.hero .sw-hero__chart-bottom span:last-child{flex:1;text-align:right}
@media(max-width:760px){.hero .sw-hero__chart{max-width:none}.hero .sw-hero__bar{height:44px}}

/* 1번 그래프: 컬러 + 움직임 */
.hero .sw-hero__seg--core{background:linear-gradient(90deg,var(--sw-orange-600),var(--sw-orange-600),var(--sw-orange-600));background-size:200% 100%}
.hero .sw-hero__seg--range{background:repeating-linear-gradient(135deg,var(--sw-orange-600) 0 5px,rgba(251,102,12,.4) 5px 10px)}
.hero .sw-hero__seg--rest{background:linear-gradient(90deg,var(--sw-navy-700),var(--sw-navy-900) 60%,var(--sw-navy-900))}
.hero .sw-hero__bar{background:rgba(255,255,255,.1);box-shadow:0 0 0 1px rgba(255,255,255,.22) inset}
.hero .sw-hero__slide.is-active .sw-hero__seg--core{animation:swHeroGrow .9s cubic-bezier(.2,.8,.2,1) both,swHeroFlow 3s linear .9s infinite,swHeroGlow 1.8s ease-in-out .9s infinite}
.hero .sw-hero__slide.is-active .sw-hero__seg--range{animation:swHeroGrow .9s cubic-bezier(.2,.8,.2,1) .25s both,swHeroPulse 1.4s ease-in-out 1.2s infinite}
@keyframes swHeroFlow{from{background-position:0 0}to{background-position:-200% 0}}
@keyframes swHeroGlow{0%,100%{box-shadow:var(--sw-shadow-sm)}50%{box-shadow:var(--sw-shadow-md)}}
@keyframes swHeroPulse{0%,100%{opacity:1}50%{opacity:.55}}
.hero .sw-hero__chart-top b{background:linear-gradient(90deg,var(--sw-orange-600),var(--sw-orange-600));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero .sw-hero__chart-bottom span:first-child{color:var(--sw-orange-600)}

/* 2번 슬라이드: 0원으로 내려가는 숫자 (긴 금액도 오른쪽 영역 안에 들어오게) */
.hero .sw-hero__num[data-countdown]{font-size:48px;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:760px){.hero .sw-hero__num[data-countdown]{font-size:clamp(32px,11vw,48px)}}

/* 0원 도착 시 크게 터지는 효과 */
.hero .sw-hero__num[data-countdown]{transform-origin:right center}
.hero .sw-hero__num[data-countdown].is-zero{transform:scale(1.7);color:var(--sw-text-on-dark);text-shadow:0 0 28px rgba(251,102,12,.95),0 0 60px rgba(251,102,12,.7);animation:swHeroZero .75s cubic-bezier(.2,1.4,.4,1)}
@keyframes swHeroZero{0%{transform:scale(1);color:var(--sw-gold-light)}45%{transform:scale(2.15)}100%{transform:scale(1.7)}}
@media(max-width:760px){.hero .sw-hero__num[data-countdown]{transform-origin:left center}.hero .sw-hero__num[data-countdown].is-zero{transform:scale(1.4)}}
.hero .sw-hero__num[data-countdown]{margin-bottom:32px}
.hero .sw-hero__num[data-countdown]~.sw-hero__badge{margin-top:16px}

/* 2번 슬라이드: 0원을 가운데 정렬하고 아래 문구와 겹치지 않게 여백 확보 */
.hero .sw-hero__figure--zero{align-items:center;text-align:center}
.hero .sw-hero__figure--zero .sw-hero__num[data-countdown]{transform-origin:center center;margin-top:24px;margin-bottom:48px}
.hero .sw-hero__figure--zero .sw-hero__num[data-countdown]~.sw-hero__badge{margin-top:24px}
.hero .sw-hero__figure--zero .sw-hero__caption{margin-top:16px}
@media(max-width:760px){.hero .sw-hero__figure--zero{align-items:center;text-align:center}.hero .sw-hero__figure--zero .sw-hero__num[data-countdown]{transform-origin:center center}}

/* 0원: 빛 효과 없이 주황색 */
.hero .sw-hero__num[data-countdown].is-zero{color:var(--sw-orange-600);text-shadow:none}
@keyframes swHeroZero{0%{transform:scale(1);color:var(--sw-gold-light)}45%{transform:scale(2.15)}100%{transform:scale(1.7)}}

/* 3번 슬라이드: 숫자 주황색 */
.hero .sw-hero__lead+.sw-hero__num{color:var(--sw-orange-600)}

/* 2번 슬라이드: 선납금 ✕ 표시 + 100% 후불식 */
.hero .sw-hero__badge--x{display:inline-flex;align-items:center;gap:8px}
.hero .sw-hero__x{color:var(--sw-orange-600);flex:none}
.hero .sw-hero__figure--zero .sw-hero__caption{font-size:20px;font-weight:800;color:var(--sw-text-on-dark);letter-spacing:-.02em}
.hero .sw-hero__figure--zero .sw-hero__caption{font-size:20px;word-break:keep-all}
.hero .sw-hero__num[data-countup]{white-space:nowrap;font-variant-numeric:tabular-nums}

/* 카드 배경: 비단(실크) 질감 — 은은한 광택 주름 + 고운 직물결 */
.hero .sw-hero__card{
  background:
    linear-gradient(112deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.95) 14%,rgba(255,255,255,0) 28%,rgba(201,176,128,.16) 40%,rgba(255,255,255,.85) 54%,rgba(255,255,255,0) 68%,rgba(201,176,128,.14) 82%,rgba(255,255,255,.7) 94%,rgba(255,255,255,0) 100%),
    repeating-linear-gradient(98deg,rgba(150,126,84,.045) 0 1px,rgba(255,255,255,0) 1px 3px),
    radial-gradient(ellipse 80% 70% at 15% 0%,rgba(255,255,255,.9),rgba(255,255,255,0) 60%),
    var(--sw-surface-sand);
  box-shadow:inset 0 0 40px rgba(201,176,128,.18);
}

/* 오른쪽 남색 영역 장식 무늬: 반투명 원 + 대각선 + 삼각형 (레퍼런스 팝업 참고) */
.hero .sw-hero__track{position:relative;overflow:hidden}
.hero .sw-hero__track::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle 15px at 56% 22%,rgba(255,255,255,.17) 98%,transparent),
    radial-gradient(circle 7px at 61% 31%,rgba(255,255,255,.2) 98%,transparent),
    radial-gradient(circle 22px at 93% 56%,rgba(255,255,255,.09) 98%,transparent),
    radial-gradient(circle 10px at 52% 78%,rgba(251,102,12,.28) 98%,transparent),
    radial-gradient(circle 5px at 70% 12%,rgba(255,255,255,.22) 98%,transparent),
    linear-gradient(118deg,transparent 58%,rgba(255,255,255,.07) 58% 58.4%,transparent 58.4% 66%,rgba(255,255,255,.05) 66% 66.3%,transparent 66.3% 78%,rgba(255,255,255,.06) 78% 78.4%,transparent 78.4%);
}
.hero .sw-hero__track::after{
  content:"";position:absolute;right:0;bottom:0;width:88px;height:88px;pointer-events:none;z-index:0;
  background:rgba(251,102,12,.22);clip-path:polygon(100% 0,100% 100%,0 100%);
}
.hero .sw-hero__inner::after{
  content:"";position:absolute;right:56px;top:0;width:64px;height:64px;pointer-events:none;z-index:0;
  background:rgba(255,255,255,.08);clip-path:polygon(0 0,100% 0,50% 100%);
}
.hero .sw-hero__slide,.hero .sw-hero__controls{position:relative;z-index:1}
@media(max-width:760px){.hero .sw-hero__track::after,.hero .sw-hero__inner::after{display:none}}

/* 왼쪽 카드: 질감 없이 흰색 */
.hero .sw-hero__card{background:var(--sw-surface);box-shadow:none}

/* 진입 시 위에서 서서히 내려와 자리 잡기 */
.hero .sw-hero__inner{animation:swHeroDrop 1.5s cubic-bezier(.22,.61,.36,1) .35s backwards}
@keyframes swHeroDrop{from{transform:translateY(-130%);opacity:0}60%{opacity:1}to{transform:none;opacity:1}}

/* 4번 슬라이드: 문장형 큰 문구 */
.hero .sw-hero__num--phrase{font-size:clamp(32px,3.9vw,48px);line-height:1.2;letter-spacing:-.02em;word-break:keep-all;white-space:normal}
@media(max-width:760px){.hero .sw-hero__num--phrase{font-size:32px}}

/* 모바일: 컨트롤을 한 줄로 */
@media(max-width:760px){
  .hero .sw-hero__controls{flex-wrap:nowrap;gap:2px;padding:4px 8px;justify-content:center}
  .hero .sw-hero__nav{width:36px;height:36px}
  .hero .sw-hero__nav--text{width:auto;height:36px;padding:0 16px;font-size:14px;margin-left:4px}
  .hero .sw-hero__dot{width:30px;height:36px}
}

/* 모바일: 히어로를 보는 동안 사이드 아이콘 숨김, 히어로를 벗어나면 화면 중앙에 표시 */
@media(max-width:760px){
  .sw-float{transition:opacity .3s,visibility .3s}
  body.sw-in-hero .sw-float{opacity:0;visibility:hidden;pointer-events:none}
}

/* 배너 안 글자·숫자 가운데 정렬 */
.hero .sw-hero__card{align-items:center;text-align:center}
.hero .sw-hero__figure,.hero .sw-hero__figure--zero{align-items:center;text-align:center}
.hero .sw-hero__chart-top{justify-content:center;align-items:baseline;flex-wrap:wrap;gap:4px 16px}
.hero .sw-hero__chart-bottom{justify-content:center;gap:16px;text-align:center}
.hero .sw-hero__chart-bottom span:first-child,.hero .sw-hero__chart-bottom span:last-child{flex:0 1 auto;text-align:center}
@media(max-width:760px){
  .hero .sw-hero__figure{align-items:center;text-align:center}
  .hero .sw-hero__num[data-countdown]{transform-origin:center center}
}
/* 막대 아래 라벨은 막대 구간 위치에 맞춰 양쪽 끝에 둔다 */
.hero .sw-hero__chart-bottom{justify-content:space-between;gap:0}
.hero .sw-hero__chart-bottom span:first-child{flex:0 0 30%;text-align:left}
.hero .sw-hero__chart-bottom span:last-child{flex:1;text-align:right}

/* 동작 줄이기 설정이 켜진 기기에서도 히어로 배너 효과는 항상 보이게 (전역 transition:none 규칙을 되돌림) */
@media(prefers-reduced-motion:reduce){
  .hero .sw-hero__inner{transition:transform .45s ease,opacity .35s ease!important}
  .hero .sw-hero__dot::after{transition:all .25s!important}
}

/* 4번 슬라이드 문구: 흰색 */
.hero .sw-hero__num.sw-hero__num--phrase{color:var(--sw-text-on-dark)}

/* 숫자와 단위(원, 만 원) 사이 간격 */
.hero .sw-hero__unit{margin-left:.16em;letter-spacing:-.02em}

/* 아래 설명 문구: 모든 슬라이드에서 같은 아래쪽 줄에 맞춤 */
.hero .sw-hero__figure{position:relative;padding-bottom:64px}
.hero .sw-hero__figure .sw-hero__caption{position:absolute;left:12px;right:12px;bottom:26px;margin:0;text-align:center}
.hero .sw-hero__figure--zero .sw-hero__caption{margin:0}

/* 숫자는 더 크게, 단위(원 · 만 원)는 숫자의 절반 크기로 */
.hero .sw-hero__unit{font-size:.5em;margin-left:.18em;letter-spacing:-.02em}
.hero .sw-hero__num[data-countdown]{font-size:48px}
.hero .sw-hero__num[data-countdown].is-zero{transform:scale(2.1)}
.hero .sw-hero__num[data-countup]{font-size:48px}
@media(max-width:760px){
  .hero .sw-hero__num[data-countdown]{font-size:clamp(32px,12.5vw,48px)}
  .hero .sw-hero__num[data-countdown].is-zero{transform:scale(1.8)}
  .hero .sw-hero__num[data-countup]{font-size:48px}
}

/* 오른쪽 금액 영역: 위아래·좌우 균형 있게 가운데로, 설명줄은 더 아래로 */
.hero .sw-hero__figure{padding:48px 32px 64px}
.hero .sw-hero__figure .sw-hero__caption{bottom:14px}
@media(max-width:760px){.hero .sw-hero__figure{padding:24px 24px 64px}}

/* 2번 슬라이드: "선납금 ✕" 배지를 0원 오른쪽으로 (크기는 그대로) */
.hero .sw-hero__figure--zero{display:grid;grid-template-columns:auto auto;justify-content:center;align-content:center;align-items:center}
.hero .sw-hero__figure--zero .sw-hero__num[data-countdown]{grid-column:1;margin:0}
.hero .sw-hero__figure--zero .sw-hero__num[data-countdown]~.sw-hero__badge{grid-column:2;margin:0 0 0 calc(clamp(48px,6vw,96px)*.85);justify-self:start;white-space:nowrap}
@media(max-width:760px){
  .hero .sw-hero__figure--zero .sw-hero__num[data-countdown]~.sw-hero__badge{margin-left:calc(clamp(32px,12.5vw,64px)*.8)}
}

/* 4번 슬라이드: 메인 문구는 가운데, "살아서 나누는"은 아래 설명 줄과 붙여서 맨 아래 */
.hero .sw-hero__figure--phrase{padding:48px 32px}
.hero .sw-hero__figure--phrase .sw-hero__badge{position:absolute;left:50%;bottom:48px;margin:0;transform:translateX(-50%);white-space:nowrap}

/* 오른쪽 설명 줄: 4개 슬라이드 모두 같은 크기·굵기·색 */
.hero .sw-hero__figure .sw-hero__caption,.hero .sw-hero__figure--zero .sw-hero__caption{font-size:18px;font-weight:700;color:var(--sw-text-on-dark);letter-spacing:-.02em;line-height:1.2;word-break:keep-all}
@media(max-width:760px){.hero .sw-hero__figure .sw-hero__caption,.hero .sw-hero__figure--zero .sw-hero__caption{font-size:16px}}

/* 4번 슬라이드 강조 문구: 주황 */
.hero .sw-hero__num--phrase .sw-hero__hl{color:var(--sw-orange-600)}
/* 2026-11-04 디자인 쪽 359e6ec: 링크를 뺀 정보용 배지 (통계 문구) */
.hero .sw-hero__btn--static,.hero .sw-hero__btn--static:hover{cursor:default;background:var(--sw-orange-600);pointer-events:none}
/* 출처 각주 (출처를 받으면 내용을 바꾼다 — PRD F2-3 P3) */
.hero .sw-hero__note{margin:8px 0 0;font-size:14px;letter-spacing:-.02em;opacity:.72}
.hero .sw-hero__btn sup,.hero .sw-hero__desc sup{font-size:14px;margin-left:2px}