/* ── 브랜드 색 토큰 (care-design-system §2 · 08 기획 §3-9, 2026-09-12) ──
   랜딩 전용 사본(fc 무영향). 아래 값이 정본이며 하드코딩 색은 전부 이 토큰을 쓴다.
   주의: 모듈 CSS(.UserLanding-module__page)의 --ink/--muted/--line/--paper 는 옛 크롤 랜딩 값이라 참조하지 않는다. */
:root{
  --bd-navy:#0d1e3c;        /* 브랜드 네이비(제목·2차 버튼 외곽선·다크 섹션) */
  --bd-navy-2:#1B2E4B;      /* 네이비 밝은 단계(그라데이션·호버) */
  --bd-orange:#EF8000;      /* 브랜드 오렌지 — 1차 CTA 하나에만 */
  --bd-orange-2:#f58c14;    /* 배너·호버 단계 */
  --bd-orange-text:#A65400; /* 오렌지 '글자'용(10-3 검수). #EF8000 은 흰/틴트 위 2.5~2.7:1 이라 글자엔 못 쓴다 → 이 값은 틴트·흰 배경 위 5.0:1 */
  --bd-cream:#FEFCF6;       /* 따뜻한 보조 배경(섹션 교차용) */
  --bd-ink:#2B2823;         /* 본문 글자 */
  --bd-muted:#5c6b85;       /* 보조 글자 */
  --bd-muted-2:#8b87a3;     /* 더 옅은 보조 */
  --bd-border:#e5eaf1;      /* 선 */
  --bd-bg-soft:#f6f8fb;     /* 옅은 회색 배경(기존 값 유지) */
  --bd-white:#fff;
  /* 10-3 탭 쇼케이스용 따뜻한 단계(docs/10 §2-1 의 값을 토큰으로) */
  --bd-orange-tint:#FFF4E5; /* 선택 탭 배경·배지 배경 */
  --bd-line-warm:#ece4d6;   /* 패널·탭 테두리 */
  --bd-cream-2:#FBF7EF;     /* 패널 일러스트 영역 */
}

/* 가로 스크롤 방지. overflow-x:hidden 은 스펙상 overflow-y 를 auto 로 강제해
   html(높이 auto)이 스크롤 컨테이너가 되지만 자기 높이=콘텐츠 높이라 세로 스크롤이 죽는다
   (특히 긴 가족간병 iframe 탭에서 스크롤 불가 사고). overflow-x:clip 은 세로를 visible 로
   유지해 뷰포트 정상 스크롤을 살리면서 가로만 잘라낸다. */
html{overflow-x:clip}
body,
.UserLanding-module___iRqKW__page{overflow:visible}

/* 히어로 배너 — 어두운 배경 + 흰색 문구 (이미지 없는 슬라이드도 동일하게) */
.UserLanding-module___iRqKW__hero{background:linear-gradient(160deg,var(--bd-navy),var(--bd-navy-2))}
.UserLanding-module___iRqKW__brand,
.UserLanding-module___iRqKW__h1{color:#fff}
.UserLanding-module___iRqKW__loginLink{color:#ffffffd9}
.UserLanding-module___iRqKW__loginLink:hover{color:#fff}

/* 로그인 카드를 우측으로 이동 */
/* 문구+기능 이미지가 들어갈 자리를 넓히고, 로그인 카드는 우측으로 밀어둔다 */
/* 배너는 화면 양끝까지 꽉 채운다 */
.UserLanding-module___iRqKW__hero{position:relative;overflow:hidden}
.UserLanding-module___iRqKW__hero .UserLanding-module___iRqKW__inner{position:relative;z-index:1;max-width:none;padding:0 clamp(24px,4vw,64px)}
/* 슬라이드별 배경 이미지 — 배너 전체를 덮고, 문구/로그인 카드가 그 위에 올라간다 */
.bd-heroBg{position:absolute;inset:0;z-index:0;pointer-events:none;transition:background-color .6s ease}
.bd-heroBgLayer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .6s ease}
.bd-heroBgLayer.is-on{opacity:1}
/* (fc 옛 레이어별 오버레이·data-bg 규칙은 10-3 검수로 삭제 - /user 는 head 의 #bd-heroBg 규칙이 세 장을 통일한다) */
.UserLanding-module___iRqKW__heroGrid{position:relative;grid-template-columns:1.2fr .8fr;gap:clamp(24px,3vw,48px)}
@media (max-width:900px){
  .UserLanding-module___iRqKW__heroGrid{grid-template-columns:1fr;gap:34px}
}
.bd-loginCard{max-width:400px;margin-left:auto;margin-right:auto;position:relative;z-index:1}
@media (max-width:900px){
  .bd-loginCard{margin-right:0}
}

/* 텍스트 열을 왼쪽으로 이동 */
.bd-heroTextCol{position:relative;margin-left:clamp(24px,13vw,280px);min-width:0}

/* 히어로 헤드라인 롤링 배너 — 3개 문구가 자동으로 순환.
   트랙 가로 슬라이드 트랜지션은 10-3 검수(v0.2 §3 제거 목록)로 뺐다 - 헤드라인 스태거와 두 모션이 겹쳐 돌았다. translateX 는 즉시 전환, 등장 모션은 스태거 하나만. */
.bd-heroRoll{overflow:hidden;min-width:0;height:450px}
.bd-heroRollTrack{display:flex;min-width:0;height:100%}
.bd-heroRollSlide{flex:0 0 100%;min-width:0;display:flex;align-items:center}
.bd-heroRollSlide .UserLanding-module___iRqKW__h1{margin:0;font-size:clamp(28px,3.6vw,44px)}
/* 서브카피 최소 16px(고령 이용자, §3-1). 히어로 ②는 index.html 의 .bd-heroRollDesc--lg 로 18px */
.bd-heroRollDesc{margin:18px 0 0;max-width:32em;color:#ffffffd9;font-size:clamp(16px,1.4vw,17px);line-height:1.6;word-break:keep-all}
/* 슬라이드 문구 (배경 이미지 위에 올라감) */
.bd-heroSlideRow{display:flex;align-items:stretch;width:100%;height:100%;min-width:0}
.bd-heroSlideText{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center}
@media (max-width:900px){
  .bd-heroRoll{height:280px}
  .bd-heroRollDesc{margin-top:12px;font-size:16px}
  .bd-heroSlideImg{display:none}
}
.bd-heroRollDots{display:flex;gap:8px;margin-top:22px}
.bd-heroRollDot{width:8px;height:8px;border-radius:999px;background:#ffffff59;border:0;padding:0;cursor:pointer;transition:width .25s ease,background .25s ease}
.bd-heroRollDot.is-active{width:26px;background:#fff}
/* 모바일 — 페이징 버튼을 배너 맨 아래로 내린다 */
@media (max-width:900px){
  .UserLanding-module___iRqKW__hero{--bd-heroPadB:84px;padding-bottom:var(--bd-heroPadB)}
  .bd-heroTextCol,
  .UserLanding-module___iRqKW__heroGrid{position:static}
  .bd-heroRollDots{position:absolute;left:0;right:0;bottom:calc(18px - var(--bd-heroPadB));margin-top:0;justify-content:center;z-index:2}
}

/* 히어로 아래 섹션 - 앱소개·혜택·이용방법·서비스 4개 섹션 규칙은 파일 끝(2026-09-14 복구 블록)에 있다.
   10-3 검수: fc 사본에서 넘어온 미사용 규칙(.bd-reasons*·.bd-feature*·.bd-aum*·.bd-more*·.bd-point*·.bd-attend*·.bd-quiz*, 로그인 카드의 탭·카카오·입력칸)도 삭제했다(HTML 0건). */

/* 히어로 로그인 카드 - /user 는 제목 + 로그인(2차) + 회원가입(1차, index.html .bd-loginGhost) 3개만 쓴다 */
.bd-loginCard{background:#fff;border-radius:20px;padding:32px 28px;box-shadow:0 30px 60px #00000040}
/* PC 전용: 로그인 카드를 스크롤에도 따라다니는 플로팅으로 고정한다.
   (모바일 ≤900px 은 카드가 display:none 이라 영향 없음 — 상단 버튼 사용) */
@media (min-width:901px){
  .bd-loginCard{position:fixed;top:92px;right:clamp(24px,4vw,64px);width:288px;max-width:288px;margin:0;z-index:40}
}
.bd-loginTitle{text-align:center;letter-spacing:-.02em;margin:0 0 6px;font-size:22px;font-weight:800;color:var(--bd-navy)}
/* 로그인 = 2차(네이비 외곽선). 1차 오렌지는 회원가입(.bd-loginGhost, index.html) 하나만 — 08 기획 §3-1 */
.bd-loginSubmit{width:100%;min-height:48px;background:#fff;color:var(--bd-navy);border:1.5px solid var(--bd-navy);border-radius:12px;cursor:pointer;padding:13px 0;font-size:15px;font-weight:700}

/* 보상영업 방법 바로가기 플로팅 버튼 */
html{scroll-behavior:smooth}
.bd-salesGuideFloat{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:15px 18px;border:1px solid rgba(255,255,255,.24);border-radius:12px;background:var(--bd-navy);color:#fff;box-shadow:0 12px 28px rgba(13,30,60,.28);font-size:14px;font-weight:800;letter-spacing:-.02em;line-height:1;text-decoration:none;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.bd-salesGuideFloat:hover{background:var(--bd-navy-2);color:#fff;transform:translateY(-3px);box-shadow:0 16px 32px rgba(13,30,60,.35)}
/* 포커스 링은 브랜드 네이비(10-3 검수: 비브랜드 민트 outline 제거). 흰 2px 틈 + 네이비 2px 를 box-shadow 로 그리고 기존 그림자는 뒤에 이어 붙인다.
   .bd-floatStack 을 앞에 둬 --app 변형의 :hover box-shadow(뒤에 정의) 보다 우선하게 한다. */
.bd-floatStack .bd-salesGuideFloat:focus-visible{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--bd-navy),0 12px 28px rgba(13,30,60,.28)}
.bd-salesGuideFloat svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:600px){
  .bd-floatStack{right:16px;bottom:16px}
  .bd-salesGuideFloat{padding:14px 16px;font-size:13px}
}

/* 하단 푸터 — 다크 배경 + 약관 링크 + 사업자 정보 */
.bd-footer{background:#252d33;padding:38px 0 46px}
.bd-footerInner{max-width:1320px;margin:0 auto;padding:0 clamp(24px,4vw,64px)}
.bd-footerLinks{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:22px;margin-bottom:26px}
.bd-footerLinks a{color:#c8cdd2;font-size:13.5px;text-decoration:none;transition:color .2s ease}
.bd-footerLinks a:hover{color:#fff}
.bd-footerInfo p{margin:0 0 10px;color:#9aa2a9;font-size:13.5px;line-height:1.6;word-break:keep-all}
.bd-footerInfo p:last-child{margin-bottom:0}
.bd-footerInfo strong{color:#fff;font-weight:700}
.bd-footerDivider{margin:0 4px;color:#5d666d}
@media (max-width:700px){
  .bd-footer{padding:30px 0 36px}
  .bd-footerLinks{justify-content:flex-start;gap:14px;margin-bottom:20px}
  .bd-footerLinks a{font-size:12.5px}
  .bd-footerInfo p{font-size:12.5px}
}

/* (fc 의 앱 설치 유도 밴드 .bd-appCta*·.bd-store*, 배너 아래 탭 .bd-tabBar*·.bd-tab·.bd-tabPanel, 가족간병 프레임 .bd-careFrame 규칙은 10-3 검수로 삭제 - /user HTML 0건. 설치 유도는 .bd-closingBanner 가 맡는다) */

/* 우측 플로팅 버튼 묶음 */
.bd-floatStack{position:fixed;right:28px;bottom:28px;z-index:20;display:flex;flex-direction:column;align-items:stretch;gap:10px}
.bd-salesGuideFloat--app{background:#fff;color:var(--bd-navy);border-color:var(--bd-border);box-shadow:0 12px 28px rgba(13,30,60,.18)}
.bd-salesGuideFloat--app:hover{background:#fff;color:var(--bd-navy);box-shadow:0 16px 32px rgba(13,30,60,.26)}
/* 플레이스토어 로고는 색이 채워진 아이콘이라 기본 stroke 규칙을 해제한다 */
.bd-floatStack .bd-salesGuideFloat{justify-content:center}
/* 플로팅 묶음 가림 방지(2026-09-17): 푸터가 보이면 묶음 전체를, 이용방법 섹션에 닿은 뒤엔 '메뉴 살펴보기'만 숨긴다(index.html 관찰자가 body 클래스 토글). */
.bd-floatStack{transition:opacity .2s ease,visibility .2s ease}
body.bd-footerInView .bd-floatStack{opacity:0;visibility:hidden;pointer-events:none}
body.bd-pastGuide .bd-floatStack a.bd-salesGuideFloat[href="#member-guide"]{display:none}
.bd-salesGuideFloat--app .bd-playIcon{flex:0 0 auto;width:18px;height:18px;fill:initial;stroke:none;overflow:visible}

/* 로그인 카드 — 호버·포커스 (탭·카카오·입력칸·에러 규칙은 /user 에 요소가 없어 10-3 검수로 삭제) */
.bd-loginSubmit:hover{background:var(--bd-bg-soft)}
.bd-loginCard button:focus-visible{outline:2px solid var(--bd-navy);outline-offset:2px}

/* 안내 알림(토스트) */
.bd-toast{position:fixed;right:28px;bottom:150px;z-index:30;max-width:280px;padding:13px 18px;border-radius:10px;background:rgba(13,30,60,.94);color:#fff;font-size:14px;font-weight:700;letter-spacing:-.02em;box-shadow:0 14px 30px rgba(13,30,60,.3);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.bd-toast.is-on{opacity:1;transform:translateY(0)}
@media (max-width:600px){
  .bd-toast{right:16px;left:16px;bottom:130px;max-width:none}
}

/* (fc 의 앱 설치 QR·스토어 버튼 .bd-installQr*·.bd-storeRow 는 삭제 - /user 는 클로징의 .bd-closingQr·.bd-closingStores 를 쓴다) */

/* 스크롤 리빌 - 유일한 등장 모션(docs/10 §3). reduced-motion 이면 즉시 표시 */
.bd-revealUp{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.bd-revealUp.is-in{opacity:1;transform:none}
/* reduced-motion 한 블록(10-3 검수 권장): 스크롤 리빌·부드러운 스크롤·히어로 배경 크로스페이드·QR 팝 애니메이션을 전부 즉시로.
   헤드라인 스태거는 index.html head(.js .bd-heroLine), 쇼케이스 크로스페이드·고정 CTA 바는 각 블록의 reduce 규칙이 맡는다. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bd-revealUp{opacity:1;transform:none;transition:none}
  .bd-heroBg,.bd-heroBgLayer{transition:none}
  .bd-qrPop.is-on{animation:none}
}

/* 플로팅 앱 설치 — PC에서 QR 말풍선 (키프레임은 옛 상담 모달의 bd-consult-in 을 bd-pop-in 으로 이름만 바꿔 유지) */
@keyframes bd-pop-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bd-qrPop{position:fixed;right:28px;bottom:150px;z-index:30;display:none;flex-direction:column;align-items:center;gap:10px;padding:16px;border-radius:14px;background:#fff;box-shadow:0 18px 40px rgba(13,30,60,.28)}
.bd-qrPop.is-on{display:flex;animation:bd-pop-in .2s ease both}
.bd-qrPop img{width:150px;height:150px;display:block}
.bd-qrPop span{color:var(--bd-muted);font-size:12.5px;line-height:1.5;text-align:center}
@media (max-width:600px){
  .bd-qrPop{right:16px;bottom:130px}
}

/* ── 모바일 플로팅 버튼 보정 (fc 의 서비스 제목·유니버스 목업 모바일 보정은 10-3 검수로 삭제) ── */
@media (max-width:700px){
  /* 플로팅 버튼이 본문을 덜 가리도록 */
  .bd-floatStack{right:12px;bottom:12px;gap:8px}
  .bd-salesGuideFloat{padding:11px 14px;font-size:12.5px}
  .bd-salesGuideFloat svg,.bd-salesGuideFloat--app .bd-playIcon{width:16px;height:16px}
}

/* (모바일 진입 앱설치 안내 .bd-appPrompt 규칙은 2026-09-12 §6-3 (b)로 다이얼로그와 함께 제거) */

/* ── 신뢰 밴드(§3-2) — 히어로 바로 아래, 크림 배경 + 위아래 1px 선. 숫자 세방고딕 700 36px(모바일 28px) 네이비, 라벨 Pretendard 15px muted.
   PC 4열 / 모바일 2×2. 아이콘·이모지 없음. ── */
.bd-trust{background:var(--bd-cream);border-top:1px solid var(--bd-border);border-bottom:1px solid var(--bd-border);padding:34px 0}
.bd-trustGrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.bd-trustItem{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 12px;text-align:center;border-left:1px solid var(--bd-border)}
.bd-trustItem:first-child{border-left:0}
.bd-trustNum{display:block;font-family:'Sebang Gothic','Pretendard',sans-serif;font-size:36px;font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--bd-navy);font-variant-numeric:tabular-nums}
.bd-trustLabel{display:block;font-family:'Pretendard',sans-serif;font-size:15px;font-weight:600;line-height:1.4;color:var(--bd-muted);word-break:keep-all}
@media (max-width:767px){
  .bd-trust{padding:22px 0}
  .bd-trustGrid{grid-template-columns:repeat(2,1fr);row-gap:22px}
  .bd-trustItem:nth-child(3){border-left:0}
  .bd-trustNum{font-size:28px}
}

/* ── 모바일 하단 고정 CTA 바(§3-7) — 로그인(2차, 네이비 외곽선) + 회원가입(1차, 오렌지) 가로 2등분, 48px·12px 모서리.
   PC(≥768px)는 항상 숨김. 표시 중엔 body.bd-hasStickyCta 로 플로팅 버튼·토스트·QR 을 바 높이(72px + 안전영역)만큼 올린다. ── */
.bd-stickyCta{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);border-top:1px solid var(--bd-border);box-shadow:0 -8px 24px rgba(13,30,60,.12);
  transform:translateY(100%);transition:transform .2s ease}
.bd-stickyCta[hidden]{display:none}
.bd-stickyCta.is-on{transform:none}
/* 오렌지 위 흰 글자는 대비 2.7:1 이라 18px bold 이상으로만 쓴다(care-design-lead 권장) */
.bd-stickyBtn{flex:1 1 0;min-width:0;min-height:48px;padding:0 12px;border-radius:12px;font-family:'Pretendard',sans-serif;font-size:18px;font-weight:700;letter-spacing:-.02em;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.bd-stickyBtn--login{background:#fff;color:var(--bd-navy);border:1.5px solid var(--bd-navy)}
.bd-stickyBtn--login:hover{background:var(--bd-bg-soft)}
.bd-stickyBtn--signup{background:var(--bd-orange);color:#fff;border:1.5px solid var(--bd-orange)}
.bd-stickyBtn--signup:hover{background:var(--bd-orange-2);border-color:var(--bd-orange-2)}
.bd-stickyBtn:focus-visible{outline:2px solid var(--bd-navy);outline-offset:2px}
@media (min-width:768px){
  .bd-stickyCta{display:none}
}
@media (max-width:767px){
  body.bd-hasStickyCta .bd-floatStack{bottom:calc(16px + 72px + env(safe-area-inset-bottom))}
  body.bd-hasStickyCta .bd-toast,
  body.bd-hasStickyCta .bd-qrPop{bottom:calc(130px + 72px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  .bd-stickyCta{transition:none}
  .bd-stickyBtn{transition:none}
}

/* 배너 텍스트 강조 밑줄 — 주황색 */
.bd-heroRoll .UserLanding-module___iRqKW__mark:after{background:linear-gradient(90deg,var(--bd-orange-2),var(--bd-orange))}

/* (fc 옛 히어로 레이어 규칙 [data-bg="0"] 폰 목업 contain·[data-bg="2"] 우측 박스·.bd-heroLight 흰 슬라이드 전환은 10-3 검수로 삭제.
   /user 는 세 장 모두 사진(cover)이고 head 의 #bd-heroBg 규칙이 덮어쓰며, JS 도 bd-heroLight 를 토글하지 않는다) */

/* 상단 로그인 / 회원가입 — 모바일에서만 노출 */
.bd-topAuth{display:none;align-items:center;gap:10px}
/* 터치 타깃 44px(디자인 시스템 §3-10). 위아래 음수 마진으로 헤더 높이는 그대로 두고 누르는 영역만 넓힌다. */
.bd-topAuthBtn{min-height:44px;margin:-7px 0;padding:6px 2px;border:0;border-radius:12px;background:none;color:#fff;font-size:14px;font-weight:700;letter-spacing:-.02em;font-family:inherit;cursor:pointer}
.bd-topAuthBar{width:1px;height:12px;background:rgba(255,255,255,.4)}
@media (max-width:900px){
  /* 모바일: 헤더(로고+로그인/회원가입)를 스크롤해도 상단에 고정해 따라다니게 한다.
     히어로 위에선 흰 글자라, 고정 헤더는 남색 바탕을 깔아 콘텐츠 위에서도 글자가 보이게 한다. */
  .UserLanding-module___iRqKW__topbar{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    background:var(--bd-navy);padding:11px clamp(16px,4vw,24px);
    box-shadow:0 2px 12px rgba(13,30,60,.18)
  }
  /* 고정 헤더에 가려지지 않도록 히어로 내용에 상단 여백 확보.
     또한 히어로 inner(고정 헤더 포함)의 z-index 를 올려, 스텝 원(.bd-flowNum z-2) 등
     본문 요소가 헤더 위로 지나가던 문제를 막는다. 모달·플로팅(z-20~1000)보다는 낮게 둔다. */
  .UserLanding-module___iRqKW__hero .UserLanding-module___iRqKW__inner{padding-top:56px;z-index:10}
  .bd-topAuth{display:flex}
  /* 로그인 카드는 상단 버튼으로 대체 */
  .bd-loginCard{display:none}
  .UserLanding-module___iRqKW__heroGrid{grid-template-columns:1fr}
  .bd-heroRoll{height:230px}
}

/* ── 모바일 배너 정리 — 문구는 위, 이미지는 아래로 분리 ───────────── */
@media (max-width:900px){
  .bd-heroRoll{height:300px}
  .bd-heroTextCol{margin-left:0;padding:0 20px}
  .bd-heroSlideText{text-align:center}
  .bd-heroRollSlide h1{font-size:23px;line-height:1.45;letter-spacing:-.045em;word-break:keep-all}
  .bd-heroRollDesc{margin-top:10px;font-size:16px;line-height:1.6;word-break:keep-all}
  #bd-heroRollDots{justify-content:center}
}

@media (max-width:900px){
  /* 제목은 배너 위쪽에 고정, 폰 목업은 아래 영역만 차지 */
  .bd-heroTextCol{padding:0 16px}
  .bd-heroRollSlide h1{font-size:21px;line-height:1.5}
  .bd-heroSlideRow{align-items:flex-start;padding-top:6px}
}

/* 사진 배너 위 흰색 글자 가독성 — 부드러운 그림자 */
.bd-heroRollSlide h1,
.bd-heroRollDesc{text-shadow:0 2px 10px rgba(13,30,60,.45),0 1px 3px rgba(13,30,60,.35)}

/* ── 하단 CTA 바 센티널(10-3 F) - 히어로 바로 뒤 흐름 밖 1px. top:auto 라 정적 위치(히어로 하단)에서 margin-top 만큼 아래에 놓인다. ── */
.bd-ctaSentinel{position:absolute;left:0;width:1px;height:1px;margin-top:300px;pointer-events:none;visibility:hidden}


/* ── 클로징(10-3) - 네이비 단색 밴드 2열: 좌 제목·부제·QR(PC)/스토어 버튼(모바일) / 우 scene-claim 일러스트(모서리 20px, 최대 480px).
   사진·오버레이는 없다(히어로 인물 사진 중복 금지). ≤767px 1열, 일러스트가 아래. ── */
.bd-closingBanner{position:relative;width:100%;margin:0;background:var(--bd-navy);color:#fff;padding:clamp(56px,7vw,88px) 0}
.bd-closingInner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:clamp(32px,5vw,72px);align-items:center;max-width:1320px}
.bd-closingInstall{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0;text-align:left}
.bd-closingTitle{margin:0;color:#fff;font-size:clamp(26px,3vw,40px);font-weight:700;line-height:1.35;letter-spacing:-.04em;word-break:keep-all}
.bd-closingSub{margin:0;font-family:'Pretendard',sans-serif;font-size:17px;line-height:1.6;color:rgba(255,255,255,.82);word-break:keep-all}
.bd-closingQr{display:flex;align-items:center;gap:18px;margin-top:8px}
.bd-closingQr img{width:164px;height:164px;padding:12px;border-radius:16px;background:#fff;box-shadow:0 16px 34px rgba(0,0,0,.3)}
.bd-closingQr span{color:rgba(255,255,255,.82);font-family:'Pretendard',sans-serif;font-size:15px;line-height:1.6}
.bd-closingStores{display:none;flex-wrap:wrap;gap:10px;margin-top:8px}
.bd-closingStore{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:13px 22px;border:1px solid rgba(255,255,255,.35);border-radius:12px;background:rgba(255,255,255,.14);color:#fff;font-size:15px;text-decoration:none;transition:background .2s ease}
.bd-closingStore:hover{background:rgba(255,255,255,.24);color:#fff}
.bd-closingStore:focus-visible{outline:2px solid #fff;outline-offset:2px}
.bd-closingStore svg{width:20px;height:20px}
.bd-closingStore b{font-weight:800;letter-spacing:-.02em}
.bd-closingArt{min-width:0;justify-self:end;width:100%;max-width:480px}
.bd-closingArt img{display:block;width:100%;height:auto;border-radius:20px}
/* 768~1023px: 좌 칸이 300px 대로 좁아져 QR 행(164px + 안내문)이 끼므로 일러스트 칸을 380px 로 줄인다 */
@media (max-width:1023px){
  .bd-closingInner{grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:32px}
}
@media (max-width:820px){
  .bd-closingQr{display:none}
  .bd-closingStores{display:flex}
}
@media (max-width:767px){
  .bd-closingBanner{padding:56px 0 64px}
  .bd-closingInner{grid-template-columns:1fr;gap:28px}
  .bd-closingArt{order:2;justify-self:stretch;max-width:none}
  .bd-closingStores{width:100%}
  .bd-closingStore{flex:1 1 0;justify-content:center}
}

/* ── 히어로 아래 4개 섹션(앱소개·혜택·이용방법·서비스 카드) — af7d19d 버전 규칙 복구(2026-09-14, MASTER 지시 A).
   탭 쇼케이스(10-3) 규칙은 제거. ── */
.bd-appIntro{background:var(--bd-bg-soft);border-top:1px solid var(--bd-border);padding:96px 0}
.bd-appIntro .bd-h2{font-size:clamp(32px,4.4vw,48px)}
.bd-appIntro .bd-h2sub{max-width:42em;margin-bottom:0;font-size:clamp(18px,2vw,22px);line-height:1.7}
.bd-services{background:#fff;padding:88px 0;border-top:1px solid var(--bd-border)}
.bd-howto{background:var(--bd-bg-soft);border-top:1px solid var(--bd-border);padding:96px 0}
.bd-h2{text-align:center;letter-spacing:-.03em;margin:10px 0 12px;font-size:clamp(26px,3.4vw,38px);font-weight:800;color:var(--bd-navy)}
.bd-h2sub{text-align:center;color:var(--bd-muted);max-width:34em;margin:0 auto 44px;font-size:16px;line-height:1.6}
.bd-servicesInner{max-width:1320px}
.bd-servicesInner > .bd-h2{margin-bottom:98px}
.bd-consultCta{display:inline-flex;align-items:center;gap:9px;margin-top:24px;min-height:48px;padding:14px 18px;border:1.5px solid var(--bd-navy);border-radius:12px;background:#fff;color:var(--bd-navy);font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1;text-decoration:none;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.bd-consultCta:hover{background:var(--bd-bg-soft);color:var(--bd-navy);transform:translateY(-2px);box-shadow:0 9px 18px rgba(13,30,60,.2)}
.bd-consultCta:focus-visible{outline:3px solid #16c4a8;outline-offset:3px}
.bd-consultCta svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bd-serviceBullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.bd-serviceBullets li{position:relative;padding-left:18px;color:var(--bd-muted);font-size:15.5px;line-height:1.5}
.bd-serviceBullets li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--bd-navy)}
.bd-howto{scroll-margin-top:24px}
.bd-howto .bd-h2sub{margin-bottom:56px}
.bd-howtoSteps{max-width:760px;margin:0 auto;display:flex;flex-direction:column}
.bd-howtoStep{display:grid;grid-template-columns:52px 1fr;gap:22px;padding:30px 0;border-top:1px solid var(--bd-border)}
.bd-howtoSteps .bd-howtoStep:first-child{border-top:0;padding-top:0}
.bd-howtoNum{width:44px;height:44px;border-radius:12px;background:var(--bd-navy);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:900;letter-spacing:-.02em}
.bd-howtoBody h3{margin:6px 0 8px;font-size:19px;font-weight:800;color:var(--bd-navy);letter-spacing:-.01em;word-break:keep-all}
.bd-howtoBody p{margin:0;color:var(--bd-muted);font-size:15px;line-height:1.7;word-break:keep-all}
.bd-howtoList{margin:10px 0 0;padding:0;list-style:none;counter-reset:howto}
.bd-howtoList li{counter-increment:howto;position:relative;padding-left:26px;margin-top:8px;color:var(--bd-muted);font-size:15px;line-height:1.7;word-break:keep-all}
.bd-howtoList li::before{content:counter(howto) ")";position:absolute;left:0;top:0;color:var(--bd-navy);font-weight:800;font-size:14.5px}
.bd-howtoNote{margin-top:16px !important;padding-top:14px;border-top:1px dashed var(--bd-border);color:var(--bd-navy) !important;font-weight:700}
.bd-howtoExtra{max-width:760px;margin:28px auto 0;display:grid;grid-template-columns:52px 1fr;gap:22px;padding:26px 24px;border:1.5px dashed var(--bd-border);border-radius:16px;background:var(--bd-cream)}
.bd-howtoExtraBadge{width:44px;height:44px;border-radius:12px;background:var(--bd-bg-soft);color:var(--bd-navy);display:grid;place-items:center;font-size:11px;font-weight:900;letter-spacing:-.02em;text-align:center;line-height:1.2}
@media (max-width:600px){
  .bd-howto{padding:56px 0}
  .bd-howtoStep{grid-template-columns:40px 1fr;gap:14px;padding:22px 0}
  .bd-howtoNum{width:36px;height:36px;font-size:13px}
  .bd-howtoExtra{grid-template-columns:40px 1fr;gap:14px;padding:20px 16px}
  .bd-howtoExtraBadge{width:36px;height:36px;font-size:9px}
}
@media (max-width:600px){
  .bd-reasons,.bd-services{padding:56px 0}
}
.bd-appIntro .bd-h2{font-size:clamp(30px,3.1vw,42px);font-weight:700;line-height:1.25;letter-spacing:-.06em}
.bd-h2Accent{color:var(--bd-navy)}
.bd-benefits{background:var(--bd-bg-soft);padding:0 0 96px}
.bd-benefits .UserLanding-module___iRqKW__inner{max-width:1400px;padding:0 clamp(24px,4vw,56px)}
.bd-benefitGrid{display:grid;grid-template-columns:repeat(3,1fr)}
.bd-benefitCard{position:relative;padding:36px 38px 42px;border-top:1px solid #d8dee7;transition:background .25s ease,border-color .25s ease}
.bd-benefitCard + .bd-benefitCard{border-left:1px solid var(--bd-border)}
.bd-benefitCard:hover{border-top-color:var(--bd-navy);background:linear-gradient(180deg,var(--bd-cream),rgba(254,252,246,0))}
.bd-benefitHead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.bd-benefitHead h3{margin:0;font-size:clamp(17px,1.6vw,20px);font-weight:800;color:var(--bd-navy);letter-spacing:-.03em;word-break:keep-all}
.bd-benefitIcon{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#fff;border:1px solid var(--bd-border);box-shadow:0 6px 14px rgba(13,30,60,.06);transition:background .25s ease,border-color .25s ease}
.bd-benefitIcon svg{width:20px;height:20px;fill:none;stroke:#b9c1cd;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s ease}
.bd-benefitCard:hover .bd-benefitIcon{background:var(--bd-navy);border-color:var(--bd-navy);box-shadow:0 10px 20px rgba(13,30,60,.32)}
.bd-benefitCard:hover .bd-benefitIcon svg{stroke:#fff}
.bd-benefitCard p{margin:0;color:var(--bd-muted);font-size:16px;line-height:1.8;word-break:keep-all}
@media (max-width:900px){
  .bd-benefits{padding-bottom:64px}
  .bd-benefitGrid{grid-template-columns:1fr}
  .bd-benefitCard{padding:26px 0 30px}
  .bd-benefitCard + .bd-benefitCard{border-left:0}
}
.bd-benefitBand{display:flex;align-items:center;justify-content:center;width:100vw;margin:88px calc(50% - 50vw) 0;padding:52px 24px;background:var(--bd-navy);box-shadow:0 12px 30px rgba(13,30,60,.18)}
.bd-benefitBand p{flex:0 1 860px;margin:0;color:#fff;font-size:clamp(22px,3.1vw,42px);font-weight:700;line-height:1.45;letter-spacing:-.055em;text-align:center;word-break:keep-all}
@media (max-width:820px){
  .bd-benefitBand{margin-top:48px;padding:38px 20px}
  .bd-benefitBand p{font-size:clamp(20px,5.6vw,25px)}
}
@keyframes bd-bandCopyIn{from{opacity:0;filter:blur(12px);transform:translate3d(0,10px,0) scale(1.08)}to{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1)}}
.bd-bandCopy{display:inline-block;transform-origin:center;will-change:transform,filter,opacity;font-weight:inherit}
.js .bd-bandCopy{opacity:0}
.bd-bandCopy.is-in{animation:bd-bandCopyIn 1.2s cubic-bezier(.25,.6,.3,1) forwards}
@media (prefers-reduced-motion:reduce){
  .js .bd-bandCopy{opacity:1}
  .bd-bandCopy.is-in{animation:none}
}
@media (min-width:901px){
  .bd-benefits .UserLanding-module___iRqKW__inner{display:flex;flex-direction:column;justify-content:center;min-height:372px}
}
@media (max-width:700px){
  .bd-appIntro .bd-h2,.bd-howto .bd-h2,.bd-serviceTitle,.bd-serviceHighlight,
  .bd-benefitCard h3,.bd-benefitCard p,.bd-bandCopy{word-break:keep-all}
  .bd-appIntro{padding:64px 0 8px}
  .bd-appIntro .bd-h2{font-size:27px;line-height:1.35}
  .bd-benefits .UserLanding-module___iRqKW__inner{min-height:0}
  .bd-benefitCard{padding:26px 20px 30px}
  .bd-benefitCard h3{font-size:17px;line-height:1.45}
  .bd-benefitCard p{font-size:15px;line-height:1.75}
  .bd-benefitBand{margin-top:56px;padding:40px 22px}
  .bd-benefitBand p{font-size:20px;line-height:1.5}
  .bd-howto .bd-h2{font-size:24px;line-height:1.35}
  .bd-howtoNum{font-size:14px}
}
.bd-flowHead{margin-bottom:clamp(44px,5vw,74px);text-align:center}
.bd-flowHead .bd-h2{margin:0;font-size:clamp(30px,3.1vw,42px);font-weight:700;line-height:1.25;letter-spacing:-.06em}
.bd-flowTrack{position:relative;max-width:940px;margin:0 auto}
.bd-flowRail{position:absolute;top:10px;bottom:10px;left:50%;width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,var(--bd-border),var(--bd-navy) 22%,var(--bd-navy) 78%,var(--bd-border))}
.bd-flowRail > span{display:block;width:100%;height:100%;background:var(--bd-bg-soft);transform:scaleY(1);transform-origin:bottom;
  transition:transform 1.6s cubic-bezier(.16,1,.3,1) .1s}
.bd-flowTrack.is-in .bd-flowRail > span{transform:scaleY(0)}
.bd-flowItem{position:relative;display:grid;grid-template-columns:1fr 108px 1fr;align-items:center}
.bd-flowItem + .bd-flowItem{margin-top:28px}
.bd-flowBody{grid-column:1;grid-row:1;padding:24px 36px 24px 0;text-align:right}
.bd-flowItem:nth-of-type(even) .bd-flowBody{grid-column:3;padding:24px 0 24px 36px;text-align:left}
.bd-flowBody p{margin:0;color:#101828;font-size:clamp(15px,1.6vw,18.5px);font-weight:600;line-height:1.6;letter-spacing:-.05em;word-break:keep-all}
.bd-flowDot{position:relative;display:flex;grid-column:2;grid-row:1;align-items:center;justify-content:center}
.bd-flowNum{position:relative;z-index:2;display:flex;width:62px;height:62px;align-items:center;justify-content:center;
  border:2px solid var(--bd-navy);border-radius:50%;background:#fff;box-shadow:0 8px 22px rgba(13,30,60,.18);
  color:var(--bd-navy);font-size:21px;font-weight:800;
  transition:transform .4s ease,background-color .35s ease,color .35s ease,box-shadow .4s ease}
.bd-flowItem:hover .bd-flowNum{transform:scale(1.1);background:var(--bd-navy);box-shadow:0 14px 32px rgba(13,30,60,.38);color:#fff}
.bd-flowLink{position:absolute;top:50%;right:100%;width:26px;height:1px;margin-right:8px;background:var(--bd-border)}
.bd-flowItem:nth-of-type(even) .bd-flowLink{right:auto;left:100%;margin-right:0;margin-left:8px}
@media (max-width:760px){
  .bd-flowRail{left:31px;transform:none}
  .bd-flowItem{grid-template-columns:62px minmax(0,1fr);align-items:center;text-align:initial}
  .bd-flowItem + .bd-flowItem{margin-top:10px}
  .bd-flowDot{z-index:auto;grid-column:1;grid-row:1}
  .bd-flowBody,.bd-flowItem:nth-of-type(even) .bd-flowBody{grid-column:2;grid-row:1;width:auto;padding:18px 0 18px 22px;text-align:left}
  .bd-flowNum{width:56px;height:56px;font-size:19px}
  .bd-flowLink,.bd-flowItem:nth-of-type(even) .bd-flowLink{display:none}
}
.bd-brM{display:none}
@media (max-width:700px){
  .bd-brM{display:inline}
}
@media (max-width:700px){
  .bd-appIntro{padding:40px 0 0}
  .bd-benefitCard{padding:28px 20px}
  .bd-benefitCard .bd-benefitIcon{display:none}
  .bd-benefitHead{margin-bottom:6px}
  .bd-benefitCard h3{font-size:20px;line-height:1.32}
  .bd-benefitCard p{font-size:15px;line-height:1.66}
  .bd-benefits{padding-bottom:0}
  .bd-benefitBand{margin-top:120px}
}
@media (max-width:700px){
  .bd-appIntro{padding:36px 0}
  .bd-appIntro .bd-h2{margin:0}
}
@media (min-width:901px){
  .bd-appIntro{padding:57px 0 56px}
  .bd-benefits .UserLanding-module___iRqKW__inner{display:block;min-height:0}
}
@media (min-width:701px){
  .bd-benefitBand p{flex:0 1 1180px;font-size:clamp(22px,2.6vw,36px)}
}
@media (min-width:901px){
  .bd-benefitCard{position:relative;min-height:210px;padding:38px 38px}
  .bd-benefitHead{display:block;margin-bottom:9px;padding-right:64px}
  .bd-benefitCard .bd-benefitIcon{position:absolute;top:34px;right:28px}
  .bd-benefitCard h3{font-size:23px;line-height:1.32}
  .bd-benefitCard p{font-size:16px;line-height:1.66}
}
@media (max-width:900px){
     또한 히어로 inner(고정 헤더 포함)의 z-index 를 올려, 스텝 원(.bd-flowNum z-2) 등
}