/* ===== BODYFRIEND Falcon SV — Labor Day $99 landing (warm ivory) =====
   팔레트는 Labor Day 광고 배너/포스터에서 추출: 크림 바탕 + 옐로 밴드 + 레드 훅.
   히어로 영상·스틸은 흰 배경 렌더라 mix-blend-mode:multiply로 크림 위에 녹임. */
:root{
  --bg:#faf6ee;          /* cream base */
  --bg-deep:#f3ecdd;     /* deeper cream */
  --white:#ffffff;
  --ink:#201c17;
  --muted:#7a7266;
  --line:rgba(32,28,23,.12);
  --red:#e63a22;         /* Labor Day red */
  --red-deep:#c92c17;
  --yellow:#ffe14d;      /* banner yellow */
  --yellow-soft:#fff3c2;
  --gold:#a9803d;        /* warranty gold */
  --wood:#6d4a2c;
  --countbar-h:46px;
  --maxw:1120px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
  padding-bottom:var(--countbar-h);
  word-break:keep-all; /* 한국어 어절 단위 줄바꿈 */
}
/* keep-all은 한국어용 — 영어에선 기본 규칙으로 되돌림 */
html[lang="en"] body{word-break:normal}
img,video{display:block;max-width:100%;height:auto}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ===== Top bar ===== */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px clamp(18px,4vw,42px);
  background:rgba(250,246,238,.82);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__brand{font-weight:800;letter-spacing:.3em;font-size:14px;padding-left:.3em}
.topbar__tagline{font-size:11px;color:var(--muted);letter-spacing:.02em}
.topbar__badge{
  background:var(--red);color:#fff;border-radius:100px;
  font-size:11px;font-weight:800;letter-spacing:.1em;
  padding:6px 13px;white-space:nowrap;
  box-shadow:0 6px 18px -8px var(--red);
}

/* ===== Language switch (KO / EN) =====
   margin-left:auto가 남는 공간을 다 먹어서 brand+tagline은 왼쪽, 스위치+배지는 오른쪽으로 갈림. */
.langsw{
  margin-left:auto;
  display:flex;align-items:center;gap:2px;
  background:rgba(32,28,23,.06);border:1px solid var(--line);
  border-radius:100px;padding:3px;
}
.langsw__opt{
  display:inline-block;
  padding:5px 11px;border-radius:100px;
  font-size:11px;font-weight:800;letter-spacing:.04em;
  color:var(--muted);text-decoration:none;white-space:nowrap;
  transition:color .25s var(--ease),background .25s var(--ease);
}
a.langsw__opt:hover{color:var(--ink);background:rgba(255,255,255,.7)}
.langsw__opt.is-on{background:var(--white);color:var(--ink);box-shadow:0 2px 8px -4px rgba(32,28,23,.4)}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:calc(60px + 5vh) clamp(18px,5vw,40px) 24px;
  background:radial-gradient(120% 90% at 50% 0%,#fffdf7 0%,var(--bg) 62%);
  overflow:hidden;
}
.hero__pill{
  display:inline-block;
  background:var(--yellow);color:var(--red-deep);
  border-radius:100px;padding:15px 34px;
  font-size:clamp(19px,2.6vw,26px);font-weight:900;letter-spacing:.03em;
  transform:rotate(-2deg);
  border:3px solid #fff;
  box-shadow:0 0 0 3px var(--yellow),0 18px 40px -14px rgba(169,128,61,.8);
  margin-bottom:30px;
  animation:pillPop 2.2s var(--ease) infinite;
}
@keyframes pillPop{
  0%,100%{transform:rotate(-2deg) scale(1)}
  50%{transform:rotate(1.2deg) scale(1.05)}
}
.hero__title{
  font-size:clamp(32px,6.4vw,68px);
  font-weight:800;line-height:1.16;letter-spacing:-.03em;
}
.hero__title em{font-style:normal;color:var(--red)}
.hero__sub{
  margin-top:18px;color:#4c453b;
  font-size:clamp(17px,1.9vw,21px);font-weight:500;
}
.hero__sub strong{color:var(--red);font-weight:800}
.hero__media{position:relative;width:min(620px,86vw);margin:6px auto 0}
.hero__video{width:100%;mix-blend-mode:multiply}
.hero__chips{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin-top:6px;
}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--white);border:1px solid var(--line);border-radius:100px;
  padding:10px 18px;font-size:15px;font-weight:700;color:#3d3831;
  box-shadow:0 10px 24px -16px rgba(32,28,23,.35);
}
.chip::before{content:"✓";color:var(--red);font-weight:800}

/* ===== Section shells ===== */
.sec{padding:clamp(76px,13vh,150px) clamp(18px,5vw,40px)}
.sec--white{background:var(--white)}
.sec__inner{max-width:var(--maxw);margin:0 auto}
.kicker{
  font-size:13px;letter-spacing:.26em;color:var(--gold);
  font-weight:800;margin-bottom:18px;text-transform:uppercase;
}
.sec h2{
  font-size:clamp(31px,4.2vw,50px);
  font-weight:800;line-height:1.22;letter-spacing:-.025em;
}
.sec .lead{margin-top:18px;color:var(--muted);font-size:clamp(17px,1.6vw,19px);max-width:56ch}

/* ===== Price reframe ===== */
.reframe__head{text-align:center;margin-bottom:clamp(40px,7vh,64px)}
.reframe__head .lead{margin-left:auto;margin-right:auto}
.reframe__flow{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:stretch;gap:clamp(8px,1.6vw,18px);
  max-width:960px;margin:0 auto;
}
.rf-step{
  background:var(--bg);border:1px solid var(--line);border-radius:20px;
  padding:clamp(22px,3vw,36px) clamp(14px,2vw,26px);
  text-align:center;display:flex;flex-direction:column;justify-content:center;gap:6px;
}
.rf-step--hot{
  position:relative;
  background:var(--white);border-color:rgba(230,58,34,.35);
  box-shadow:0 24px 50px -30px rgba(230,58,34,.45);
}
.rf-step__save{
  position:absolute;top:-17px;left:50%;
  transform:translateX(-50%) rotate(-2deg);
  background:var(--red);color:#fff;border-radius:100px;
  padding:9px 20px;font-size:clamp(15px,1.5vw,17px);font-weight:800;
  white-space:nowrap;letter-spacing:.02em;
  box-shadow:0 12px 26px -10px rgba(201,44,23,.85);
}
.rf-step__label{font-size:15px;color:var(--muted);font-weight:600}
.rf-step__num{
  font-size:clamp(40px,4.6vw,54px);font-weight:800;letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.rf-step__num small{font-size:.42em;font-weight:700;color:var(--muted);letter-spacing:0}
.rf-step--strike .rf-step__num{color:#b3aa9b;text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:3px}
.rf-step--hot .rf-step__num{color:var(--red)}
.rf-arrow{align-self:center;color:#cfc6b4;font-size:clamp(18px,2.4vw,28px);font-weight:800}
.reframe__note{
  text-align:center;margin-top:16px;color:#4c453b;
  font-size:clamp(16px,1.6vw,18px);
}
.reframe__note strong{color:var(--ink)}

/* ===== Robo-walking ===== */
.robo__grid{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);
  align-items:center;
}
/* 2026-08-15: 스틸 2장 → 1장(robo_pose1)으로 축소. 두 다리가 서로 다른 각도로 벌어진 컷이라
   "독립 구동"을 한 장으로 보여줌. 2장 그리드였을 때의 118%/translateX 트릭은 제거됨. */
.robo__poses{display:block}
.robo__poses img{mix-blend-mode:multiply;width:100%;max-width:100%}
.robo__stats{display:grid;gap:14px;margin-top:30px}
.rstat{
  display:flex;align-items:baseline;gap:14px;
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:16px 20px;
}
.rstat__num{
  font-size:clamp(28px,2.8vw,34px);font-weight:800;letter-spacing:-.02em;
  color:var(--wood);white-space:nowrap;
}
.rstat__txt{font-size:15px;color:var(--muted)}
.rstat__txt b{color:var(--ink)}
.robo__slogan{
  margin-top:clamp(48px,8vh,80px);
  text-align:center;
  font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-.02em;
}
.robo__slogan em{font-style:normal;color:var(--red)}

/* ===== Features ===== */
.features__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,24px);
  margin-top:clamp(36px,6vh,56px);
}
.fcard{
  background:var(--bg);border:1px solid var(--line);border-radius:20px;
  overflow:hidden;padding:clamp(24px,3vw,34px);
  display:flex;flex-direction:column;gap:10px;
}
.fcard--img{padding:0}
.fcard--img img{width:100%;height:220px;object-fit:cover}
.fcard--img .fcard__body{padding:clamp(20px,2.6vw,28px) clamp(24px,3vw,34px) clamp(24px,3vw,34px)}
.fcard h3{font-size:clamp(20px,1.9vw,23px);font-weight:800;letter-spacing:-.02em}
.fcard p{font-size:15px;color:var(--muted)}
.fcard p b{color:var(--ink)}
.fcard__tag{
  align-self:flex-start;
  font-size:12px;font-weight:800;letter-spacing:.08em;
  color:var(--gold);border:1px solid rgba(169,128,61,.4);
  border-radius:100px;padding:4px 11px;margin-bottom:4px;
}
.fcard--img .fcard__tag{margin-top:0}

/* ===== Labor Day benefits (yellow band) ===== */
.benefits{background:var(--yellow)}
.benefits .kicker{color:var(--red-deep)}
.benefits h2{color:#2b2416}
.benefits__wrap{
  display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,72px);
  align-items:start;
}
.benefits__deadline{
  display:inline-block;margin-top:22px;
  background:var(--red);color:#fff;border-radius:100px;
  padding:11px 24px;font-size:16px;font-weight:800;letter-spacing:.06em;
  box-shadow:0 12px 28px -14px rgba(201,44,23,.8);
}
.blist{display:grid;gap:12px}
.bitem{
  display:flex;align-items:center;gap:16px;
  background:rgba(255,255,255,.92);border-radius:16px;
  padding:18px 22px;
  box-shadow:0 14px 30px -22px rgba(43,36,22,.5);
}
.bitem__check{
  flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--red);color:#fff;font-weight:800;font-size:15px;
  display:flex;align-items:center;justify-content:center;
}
.bitem__main{font-size:clamp(17px,1.7vw,19px);font-weight:800;letter-spacing:-.01em}
.bitem__sub{font-size:13px;color:var(--muted);margin-top:3px}
.bitem--free .bitem__main s{color:#b3aa9b;font-weight:600;margin-right:6px}
.bitem--free .bitem__main em{font-style:normal;color:var(--red)}
.benefits__fine{
  margin-top:20px;font-size:12px;line-height:1.75;color:rgba(43,36,22,.65);
}

/* 배송 지연 경고 (2026-08-15 추가) — 옐로 밴드 왼쪽 칼럼의 빈 공간을 채우는 강조 박스.
   마감 임박 시 주문이 몰려 배송이 밀린다는 실제 리스크를 알려 조기 구매를 유도. */
.rush{
  margin-top:26px;
  background:var(--white);
  border-left:5px solid var(--red);
  border-radius:14px;
  padding:18px 20px;
  box-shadow:0 16px 34px -24px rgba(43,36,22,.6);
}
.rush__title{
  display:flex;align-items:center;gap:8px;
  font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--red-deep);
}
.rush__title span{font-size:19px;line-height:1}
.rush p{margin-top:8px;font-size:14px;line-height:1.7;color:#4c453b}
.rush b{color:var(--ink);font-weight:800}

/* ===== Store CTA ===== */
.cta{text-align:center}
.cta h2 em{font-style:normal;color:var(--red)}
.cta .lead{margin-left:auto;margin-right:auto}
.store-card{
  margin:40px auto 0;max-width:460px;
  background:var(--bg);border:1px solid var(--line);
  border-radius:20px;padding:30px 30px 34px;
  display:flex;flex-direction:column;gap:14px;text-align:center;
}
.store-card__label{
  font-size:12px;letter-spacing:.22em;color:var(--gold);font-weight:800;
}
.store-card__name{font-size:clamp(20px,2vw,23px);font-weight:800;letter-spacing:-.01em}
.store-card__addr{
  color:#4c453b;text-decoration:none;font-size:16px;line-height:1.6;
  transition:color .3s var(--ease);
}
.store-card__addr:hover{color:var(--ink)}
.store-card__dir{display:block;margin-top:6px;font-size:14px;color:var(--red);font-weight:700}
.store-card__phone{
  display:inline-block;margin:6px auto 0;
  background:var(--red);color:#fff;text-decoration:none;
  border-radius:100px;padding:17px 40px;font-size:19px;font-weight:800;letter-spacing:.01em;
  box-shadow:0 16px 34px -16px rgba(201,44,23,.8);
  transition:background .3s var(--ease),transform .2s var(--ease);
}
.store-card__phone:hover{background:var(--red-deep);transform:translateY(-2px)}
.store-card__cell{
  display:inline-block;color:#4c453b;text-decoration:none;
  font-size:15px;font-weight:600;transition:color .3s var(--ease);
}
.store-card__cell:hover{color:var(--ink)}
.store-card__hint{font-size:13px;color:var(--muted)}

/* ===== Footer ===== */
.footer{
  border-top:1px solid var(--line);text-align:center;
  padding:clamp(48px,8vh,90px) clamp(18px,5vw,40px);
  background:var(--bg-deep);
}
.footer__brand{font-weight:800;letter-spacing:.3em;padding-left:.3em;font-size:15px;margin-bottom:8px}
.footer__tagline{color:#4c453b;font-size:13px;margin-bottom:16px}
.footer__meta{color:var(--muted);font-size:14px;line-height:1.75}
.footer__fine{color:#a79d8d;font-size:12px;margin-top:18px;line-height:1.75}

/* ===== Countdown bar ===== */
.countbar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  height:var(--countbar-h);
  display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,20px);
  background:linear-gradient(90deg,#d4290f,var(--red) 55%,#ff6a3d);
  color:#fff;
  box-shadow:0 -10px 30px -12px rgba(120,40,10,.45);
  padding:0 14px;font-size:13px;
}
.countbar__dot{
  width:8px;height:8px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.7);
  animation:pulse 1.8s var(--ease) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}
  70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
.countbar__label{font-weight:800;letter-spacing:.04em;white-space:nowrap}
.countbar__timer{display:flex;align-items:baseline;gap:clamp(6px,1.4vw,14px);font-variant-numeric:tabular-nums}
.countbar__seg{display:inline-flex;align-items:baseline;gap:4px}
.countbar__seg b{font-size:16px;font-weight:800;letter-spacing:.02em}
.countbar__seg i{font-style:normal;font-size:10px;letter-spacing:.06em;opacity:.9}
.countbar__seg::after{display:none;font-size:11px;font-weight:700;opacity:.9;margin-left:-2px}
.countbar__seg--d::after{content:"일"}
.countbar__seg--h::after{content:"시"}
.countbar__seg--m::after{content:"분"}
.countbar__seg--s::after{content:"초"}
/* 영어 페이지(index-en.html, <html lang="en">)에서는 모바일 축약 라벨도 영어로.
   이걸 빼면 영어 페이지 모바일 하단 바에 "일/시/분/초"가 그대로 뜸. */
html[lang="en"] .countbar__seg--d::after{content:"d"}
html[lang="en"] .countbar__seg--h::after{content:"h"}
html[lang="en"] .countbar__seg--m::after{content:"m"}
html[lang="en"] .countbar__seg--s::after{content:"s"}
.countbar.is-ended .countbar__timer{display:none}
.countbar.is-ended .countbar__dot{animation:none;opacity:.6}

/* 모바일에서만 줄을 바꾸는 <br class="br-m"> (데스크톱에선 한 줄 유지) */
.br-m{display:none}

/* ===== Reveal ===== */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in-view{opacity:1;transform:none}

/* ===== Responsive ===== */
@media (max-width:860px){
  .topbar__tagline{display:none}
  .reframe__flow{grid-template-columns:1fr;max-width:420px}
  .rf-step--hot{margin-top:12px}  /* room for the floating save badge above the card */
  .rf-arrow{transform:rotate(90deg);justify-self:center;line-height:.6}
  .robo__grid{grid-template-columns:1fr}
  .features__grid{grid-template-columns:1fr}
  .benefits__wrap{grid-template-columns:1fr}
  .fcard--img img{height:190px}
}
@media (max-width:560px){
  .topbar{padding:12px 16px;gap:8px}
  .topbar__brand{font-size:12px;letter-spacing:.2em}
  .topbar__badge{font-size:10px;padding:5px 10px;letter-spacing:.06em}
  .langsw{padding:2px}
  .langsw__opt{font-size:10px;padding:4px 8px}
  .hero{padding-top:calc(56px + 4vh)}
  .hero__title{font-size:clamp(32px,8.8vw,40px)}
  /* 여백 대비 글씨가 작아 보이던 문제: 섹션 상하 여백을 줄여 텍스트 비중을 높임 */
  .sec{padding:66px 18px}
  .reframe__head{margin-bottom:32px}
  .robo__slogan{margin-top:46px}
  /* ===== 모바일 줄바꿈 제어 (2026-08-15 사용자 요청) =====
     원칙: 승인된 카피를 줄이지 않고, 해당 헤드라인만 폰트를 낮춰 의도한 줄 수를 맞춤.
     31px 기준 375px에서 넘치던 폭 → 괄호 안이 실측값. 가용 폭은 339px. */
  /* CTA: KO "바디프랜드 체험하기 전에"(353) · EN "Don't buy a massage chair"(326@27px)
     → 26px에서 296 / 314. 360px 단말(가용 324)까지 안전하게 2줄. */
  .cta h2{font-size:26px}
  /* EN 특징 섹션: "Our most compact chair."(347) → 28px에서 312으로 1줄 확보.
     `.sec h2`(0,1,1)가 더 강해서 `.h2--tight` 단독으로는 안 먹음 → 반드시 이 형태로 쓸 것. */
  .sec h2.h2--tight{font-size:28px}
  /* EN 히어로 서브: "…$99 a month" / "with 0% financing"으로 끊음 */
  .br-m{display:inline}
  /* 매장명 1줄 통일 (2026-08-15 사용자 결정): 폰트는 20px 그대로 두고 **이름을 줄여서** 해결.
     KTP 플라자 / NJ / BP 약칭 사용. 다만 "Bodyfriend KTP Plaza Lounge"(277px)가
     기본 여백(가용 279px)과 2px 차이라 서브픽셀에서 2줄로 밀림 → 카드 좌우 패딩만 30→20px.
     이름을 다시 늘리거나 패딩을 되돌리면 KTP 영문이 2줄이 됨. */
  .store-card{padding:26px 20px 30px}
  .footer{padding:52px 18px}
  /* 긴 라벨("독립 구동")이 들어가면 가로 배치가 깨져 2행이 들쭉날쭉해짐 → 세로 스택 */
  .rstat{flex-direction:column;align-items:flex-start;gap:5px}
  .countbar{gap:10px;font-size:12px}
  .countbar__label{font-size:11px}
  .countbar__timer{gap:8px}
  .countbar__seg b{font-size:15px}
  .countbar__seg i{display:none}
  .countbar__seg::after{display:inline-block}
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .countbar__dot{animation:none}
  .hero__pill{animation:none}
}