/* ===== BODYFRIEND EARLY BLACK FRIDAY — 둘루스 랜딩 (순백 테마) =====
   바탕은 순백 #ffffff (2026-10-25 본사 요청). 옐로 밴드 + 레드 훅은 전작 광고에서 가져온 그대로.
   제품 컷은 흰 배경 렌더라 mix-blend-mode:multiply 로 바탕에 녹임. 자세한 색 체계는 CLAUDE.md 「색」. */
:root{
  --bg:#ffffff;          /* 순백 — 본사 요청 2026-10-25 (원래 크림 #faf6ee) */
  --bg-deep:#f4f4f6;     /* 한 톤 낮춘 중성 회색 (원래 크림 #f3ecdd) */
  --bg-soft:#f7f7f9;     /* 흰 바탕 위에서 카드를 띄우는 바닥색 */
  --white:#ffffff;
  --ink:#201c17;
  --muted:#6f6f77;       /* 순백 전환으로 중성화 (원래 #7a7266) */
  --line:rgba(24,24,28,.14);
  --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(255,255,255,.86);
  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%,#fbfbfd 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__main--hl{color:var(--red);font-size:clamp(19px,2vw,22px);font-weight:900}
.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 ===== */
/* ===== $4,500 혜택 = 방문 전용 안내 (2026-10-23, 페이지에서 가장 강조할 메시지) =====
   페이지에서 유일한 짙은 배경. 전화로는 안내하지 않는다는 점과 방문해야 안내한다는 점을 나란히 대비. */
.visitonly{background:var(--plum);color:#fff;text-align:center}
.visitonly__kicker{
  display:inline-block;margin-bottom:18px;
  background:var(--yellow);color:var(--plum);border-radius:100px;padding:7px 18px;
  font-size:14px;font-weight:900;letter-spacing:.04em;
}
.visitonly h2{color:#fff}
.visitonly h2 em{font-style:normal;color:var(--yellow)}
.visitonly__rules{
  display:grid;gap:12px;max-width:560px;margin:clamp(28px,4vh,40px) auto 0;text-align:left;
}
.visitonly__rule{
  display:flex;align-items:center;gap:14px;border-radius:16px;padding:16px 20px;
  font-size:clamp(17px,1.9vw,20px);font-weight:700;line-height:1.45;
}
/* 아이콘은 <i>, 문장은 <span> 하나로 묶는다 — 문장 안 <b>가 flex 칸으로 쪼개지지 않게 */
.visitonly__rule i{
  flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  font-style:normal;font-size:16px;font-weight:900;
}
.visitonly__rule--no{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.88)}
.visitonly__rule--no i{background:rgba(255,255,255,.16);color:#fff}
.visitonly__rule--yes{background:#fff;color:var(--ink)}
.visitonly__rule--yes i{background:var(--red);color:#fff}
.visitonly__rule--yes b{color:var(--red);font-weight:900}
.visitonly__btn{
  display:inline-block;margin-top:clamp(28px,4vh,40px);
  background:var(--yellow);color:var(--plum);border-radius:100px;padding:16px 30px;
  font-size:17px;font-weight:900;text-decoration:none;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.5);
}
.visitonly__btn:hover{filter:brightness(1.05)}
#visit{scroll-margin-top:60px}

.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)}
/* 채널톡 상담 — 전화(주)에 대한 강한 보조 CTA. 전화가 부담스러운 사용자용 유입구.
   라벨이 길어지면 모바일에서 2줄로 깨지므로 nowrap 유지. */
.store-card__chat{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  margin:0 auto;
  background:var(--ink);color:#fff;text-decoration:none;
  border-radius:100px;padding:15px 30px;font-size:17px;font-weight:800;letter-spacing:-.01em;
  white-space:nowrap;
  box-shadow:0 14px 30px -16px rgba(32,28,23,.9);
  transition:background .3s var(--ease),transform .2s var(--ease);
}
.store-card__chat::before{content:"💬";font-size:1.05em;line-height:1}
.store-card__chat:hover{background:#000;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);line-height:1.7}
.store-card__hint b{color:var(--plum);font-weight:800}
.bitem__sub b{color:var(--plum);font-weight:800}

/* ===== 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);
  /* 2026-10-24 EARLY BLACK FRIDAY 전환 — 레드 그라데이션에서 검정으로 (본사 요청).
     크림 바탕 페이지에 검은 띠가 깔리면 그 자체로 블랙프라이데이 신호가 된다.
     윗선 1px 옐로는 띠가 "죽은 바"로 보이지 않게 잡아주는 장치 — 지우지 말 것. */
  background:linear-gradient(90deg,#0d0d10,#23232a 52%,#0d0d10);
  border-top:1px solid var(--yellow);
  color:#fff;
  box-shadow:0 -10px 30px -12px rgba(0,0,0,.55);
  padding:0 14px;font-size:13px;
}
/* 숫자는 옐로로 — 검정 위에서 가장 멀리 읽히고, 브랜드 팔레트 안에 있는 색이다 */
.countbar__seg b{color:var(--yellow)}
.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}
}

/* ==========================================================================
   THANKSGIVING 캠페인 추가분 (2026-10-23)
   기존 Labor Day 아이보리 팔레트를 그대로 쓰고, 땡스기빙은 "하베스트 앰버"로만 얹는다.
   광고·포스터와 무드를 잇기 위해(scent match) 베이스 크림과 레드 훅은 건드리지 않음.
   ========================================================================== */
:root{
  --amber:#c8761f;       /* harvest amber — 땡스기빙 액센트 */
  --amber-soft:#f6e3c8;
  --plum:#6e2433;        /* cranberry — 보조 액센트 */
}

/* 상단바 배지 — 2026-10-24 EARLY BLACK FRIDAY 전환.
   하베스트 그라데이션에서 검정으로. 카운트다운 바와 같은 검정을 써서
   페이지 맨 위와 맨 아래가 같은 색으로 캠페인을 감싸게 한다. */
.topbar__badge--bf{
  background:linear-gradient(100deg,#0d0d10,#2a2a32);
  color:var(--yellow);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.8);
}

/* ===== 플레이스홀더 표시 =====
   본사 자료(모델명·정가·이미지)가 오기 전까지 "아직 확정 아님"을 눈에 보이게 한다.
   tools/check-ready.ps1 이 이 클래스가 남아 있으면 배포를 막는다. 절대 스타일만 지우지 말 것. */
.ph{
  background:var(--amber-soft);
  border-bottom:2px dashed var(--amber);
  border-radius:3px;
  padding:0 .22em;
  color:#6b4a1b;
  font-style:normal;
}
.ph::after{content:"\00a0?";font-size:.8em;font-weight:800;color:var(--amber);vertical-align:super}
.ph-box{
  display:flex;align-items:center;justify-content:center;
  min-height:220px;
  background:repeating-linear-gradient(135deg,var(--amber-soft) 0 14px,#fdf3e4 14px 28px);
  border:2px dashed var(--amber);border-radius:18px;
  color:#8a6020;font-size:15px;font-weight:700;text-align:center;
  padding:24px;line-height:1.7;
}
.hero__media .ph-box{min-height:min(360px,46vh)}

/* ===== 최대 $8,500 블록 (전작의 가격 리프레이밍 자리) =====
   2026-10-23 오퍼 확장: ① 모델별 할인(최대 $4,000) + ② $4,500 상당 혜택.
   ⚠️ 설계 주의: "정가 → 할인가" 화살표 흐름을 쓰지 않는다.
   - 최종 가격은 매장 재량이라 페이지에 적지 않는다(사용자 지시).
   - $4,500은 할인이 아니라 함께 가는 가치이므로, 깎아 보이게 하면 "$4,500 할인"으로 오인된다.
   그래서 합산 숫자 하나를 세우고, 바로 아래 두 칸(.duo)으로 성격이 다른 두 혜택을 갈라 보여 준다. */
.valuehero{text-align:center}
.valuehero__pre{
  display:block;margin-bottom:4px;
  font-size:clamp(22px,2.8vw,34px);font-weight:800;color:var(--red);letter-spacing:.02em;
}
.duo{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:clamp(10px,1.6vw,18px);
  max-width:820px;margin:clamp(30px,5vh,48px) auto 0;text-align:left;
}
.duo__card{
  background:var(--bg);border:1px solid var(--line);border-radius:20px;
  padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;gap:8px;
}
.duo__card--value{background:var(--amber-soft);border-color:rgba(200,118,31,.3)}
.duo__tag{font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--amber)}
.duo__num{
  font-size:clamp(30px,3.6vw,42px);font-weight:900;letter-spacing:-.03em;line-height:1.1;color:var(--red);
}
.duo__card--value .duo__num{color:var(--plum)}
.duo__card p{font-size:15px;line-height:1.65;color:#4c453b}
.duo__card p b{color:var(--ink);font-weight:800}
.duo__plus{
  align-self:center;font-size:clamp(28px,3vw,38px);font-weight:900;color:var(--amber);
}
@media (max-width:640px){
  .duo{grid-template-columns:1fr;gap:6px}
  .duo__plus{justify-self:center;line-height:1}
}

/* 히어로 합산 훅 "최대 $8,500" — 사용자 지시로 첫 화면에 반드시 크게 */
.hero__big{
  margin-top:4px;
  font-size:clamp(46px,7vw,76px);font-weight:900;letter-spacing:-.04em;line-height:1.05;color:var(--red);
}
.hero__big small{font-size:.42em;font-weight:800;letter-spacing:0;color:var(--plum);vertical-align:.32em}
/* 히어로의 혜택 분해 ("최대 $4,000 + $4,500 상당") — 합산 숫자 바로 아래에서 반드시 쪼개 보인다 */
.hsplit{
  /* 2026-10-24: align-items:center 였는데, 오른쪽 칸만 "구성은 방문 시 안내" 배지가 있어
     두 칸 높이가 68px / 94px 로 달랐고 라벨 줄이 서로 어긋나 보였다(375px 실측).
     stretch 로 바꿔 두 칸을 같은 높이로 맞추고, 라벨·값이 같은 줄에 오게 한다. */
  display:inline-flex;align-items:stretch;justify-content:center;gap:clamp(8px,1.4vw,14px);
  margin-top:14px;
}
.hsplit__plus{align-self:center}   /* 높이가 같아져도 + 기호는 가운데 유지 */
.hsplit__item{
  display:flex;flex-direction:column;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:10px clamp(14px,2vw,22px);
  box-shadow:0 10px 24px -16px rgba(32,28,23,.35);
}
.hsplit__item small{font-size:13px;font-weight:700;color:var(--muted)}
.hsplit__item b{font-size:clamp(20px,2.4vw,26px);font-weight:900;letter-spacing:-.02em;color:var(--red)}
.hsplit__item:last-child b{color:var(--plum)}
.hsplit__plus{font-size:clamp(22px,2.4vw,28px);font-weight:900;color:var(--amber)}
.hsplit__item small,.hsplit__item b{white-space:nowrap}
@media (max-width:400px){
  .hsplit{gap:6px}
  .hsplit__item{padding:9px 12px}
  .hsplit__item b{font-size:19px}
}
.hsplit__item em{
  margin-top:4px;font-style:normal;font-size:12px;font-weight:800;color:#fff;
  background:var(--plum);border-radius:100px;padding:2px 9px;white-space:nowrap;
}
.valuehero__num{
  font-size:clamp(76px,15vw,196px);
  font-weight:800;letter-spacing:-.045em;line-height:.92;
  color:var(--red);
  font-variant-numeric:tabular-nums;
  display:block;
}
.valuehero__unit{
  /* 2026-10-24 사용자 지적: 숫자와 이 줄이 거의 붙어 보였다.
     숫자가 line-height:.92 로 눌려 있어 글자 상자가 글리프에 딱 붙기 때문이다.
     고정 10px 로는 196px 숫자 옆에서 티가 안 나므로 화면 크기를 따라가게 바꿨다. */
  display:block;margin-top:clamp(18px,2.8vh,34px);
  font-size:clamp(17px,2.2vw,25px);font-weight:800;letter-spacing:.02em;color:var(--plum);
}
.valuehero__say{
  max-width:40ch;margin:clamp(26px,4vh,40px) auto 0;
  font-size:clamp(17px,1.9vw,21px);line-height:1.75;color:#4c453b;
}
.valuehero__say b{color:var(--ink);font-weight:800}
.valuehero__chips{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin-top:clamp(28px,4vh,40px);
}
.vchip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--bg);border:1px solid var(--line);border-radius:100px;
  padding:11px 20px;font-size:15px;font-weight:700;color:#3d3831;
}
.vchip::before{content:"★";color:var(--amber);font-size:.95em}

/* ===== 상위 3개 모델 카드 (신규) ===== */
.models__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);
  margin-top:clamp(36px,6vh,56px);
}
.mcard{
  background:var(--white);border:1px solid var(--line);border-radius:20px;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 18px 40px -32px rgba(32,28,23,.55);
}
.mcard__media{background:var(--bg-deep)}
.mcard__media img{width:100%;height:230px;object-fit:cover}
.mcard__body{padding:clamp(22px,2.6vw,28px);display:flex;flex-direction:column;gap:9px;flex:1}
.mcard__rank{
  align-self:flex-start;
  font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--amber);
  border:1px solid rgba(200,118,31,.42);border-radius:100px;padding:4px 11px;
}
.mcard__name{font-size:clamp(21px,2vw,25px);font-weight:800;letter-spacing:-.02em}
.mcard__desc{font-size:14px;color:var(--muted);line-height:1.7;flex:1}
/* 특징은 긴 문장 대신 항목 3개를 한 줄씩 (사용자 지시 2026-10-23). flex:1로 가격을 카드 바닥에 맞춘다. */
.mcard__feats{list-style:none;display:grid;gap:8px;align-content:start;flex:1;margin-top:2px}
.mcard__feats li{
  display:flex;align-items:center;gap:9px;
  background:var(--bg);border-radius:10px;padding:9px 12px;
  font-size:15px;font-weight:700;color:#3d3831;
}
.mcard__feats li::before{content:"✓";color:var(--amber);font-weight:900}
.mcard__price{
  margin-top:6px;padding-top:14px;border-top:1px solid var(--line);
  font-size:15px;color:var(--muted);font-weight:600;
}
.mcard__price b{
  display:block;margin-top:3px;
  font-size:clamp(23px,2.2vw,27px);font-weight:800;color:var(--ink);letter-spacing:-.02em;
}
.models__note{
  margin-top:clamp(24px,4vh,36px);text-align:center;
  font-size:clamp(16px,1.6vw,18px);color:#4c453b;
}
.models__note b{color:var(--red);font-weight:800}

/* 혜택 밴드에 하베스트 그라데이션 */
.benefits--bf{background:linear-gradient(165deg,var(--yellow) 0%,#ffd45e 58%,#ffbe5a 100%)}

@media (max-width:860px){
  .models__grid{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}
  .mcard__media img{height:200px}
}
@media (max-width:560px){
  .valuehero__num{font-size:clamp(68px,20vw,92px)}
  .vchip{font-size:14px;padding:10px 16px}
  .ph-box{min-height:170px;font-size:14px}
}

/* ==========================================================================
   GIF 제품 컷 (2026-10-23) — 본사가 상위 3개 모델을 GIF로 보내옴
   GIF의 성질 네 가지를 전부 전제로 깔고 짠 규칙이다:
   ① 무한 루프 + 멈출 수 없음 → prefers-reduced-motion에서 정지 이미지로 교체(<picture>)
   ② 256색 팔레트 → 그라데이션 배경 위에 올리면 띠가 생긴다. 반드시 단색 크림 위에.
   ③ 보통 흰 배경으로 렌더됨 → mix-blend-mode:multiply 로 크림에 녹인다(전작과 같은 방식)
   ④ 무겁다 → 폭을 CSS로 제한하고 width/height 속성으로 자리를 미리 잡아 CLS를 막는다
   ========================================================================== */

/* 제품 컷은 절대 cover로 자르지 않는다. 의자는 다리·팔걸이가 실루엣의 핵심이라
   조금만 잘려도 "싼 제품"으로 보인다. 정사각 칸에 contain으로 통째로 앉힌다. */
.mcard__media{
  position:relative;
  aspect-ratio:1/1;
  background:var(--bg);          /* 단색 — GIF 밴딩 방지 */
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.mcard__media img,
.mcard__media picture{
  width:100%;height:100%;
  object-fit:contain;
  mix-blend-mode:multiply;       /* 흰 배경 GIF를 크림에 녹임 */
}
.mcard__media picture img{width:100%;height:100%}
/* 위 .ph-box가 들어가 있을 때는 정사각 칸을 그대로 채우게 */
.mcard__media .ph-box{width:100%;height:100%;min-height:0;border-radius:0;border:none}

/* 히어로 GIF — 영상 자리와 동일 규격 */
.hero__gif{width:100%;mix-blend-mode:multiply}

/* GIF는 일시정지가 불가능하므로, 모션을 줄이도록 설정한 사용자에게는
   <picture>의 media 쿼리가 정지 이미지(첫 프레임)를 대신 내보낸다.
   정지 이미지가 없으면 GIF가 그대로 재생된다 — 그래서 첫 프레임 추출이 필수다. */
@media (prefers-reduced-motion:reduce){
  .gif-note{display:block}
}
.gif-note{display:none}

/* ==========================================================================
   EARLY BLACK FRIDAY — 패밀리 듀오 (2026-10-24)
   duo 블록이 "①할인 + ②혜택" 두 숫자에서 "두 대의 의자"로 바뀌었다.
   🔴 두 칸은 대등한 두 대다. 오른쪽을 사은품 칸처럼 보이게 꾸미지 말 것
      (강조색·"무료" 리본 등) — 계약이 문제 삼는 건 바로 그 의미다.
   ========================================================================== */
/* 예전엔 ②가 "덤"이라 앰버로 구분했지만, 이제 같은 급의 두 대이므로 배경을 같게 둔다 */
.duo__card--value{background:var(--bg);border-color:var(--line)}
.duo__img{
  width:100%;aspect-ratio:1/1;object-fit:contain;
  mix-blend-mode:multiply;   /* 흰 배경 제품 컷을 크림에 녹임 */
  margin:2px 0 4px;
}

/* 파인프린트 안에서 이 한 문장만 강조 (사용자 지시 2026-10-24).
   "방문해야 알 수 있다"는 이 캠페인의 핵심 조건이라 작은 회색 글씨에 묻히면 안 된다.
   옐로 밴드 위에서 가장 멀리 읽히는 색이 red-deep. 파인프린트 전체를 키우지는 않는다. */
.fine-hl{
  color:var(--red-deep);
  font-weight:800;
  font-size:1.08em;
  line-height:1.8;
}

/* ==========================================================================
   카운트다운 바 반짝임 (2026-10-24 사용자 요청)
   검은 띠가 조용해서 눈에 안 걸린다 → 광택 한 줄이 좌에서 우로 훑고 지나가게 한다.
   블랙프라이데이 배너의 상투적인 장치지만, 그래서 설명 없이 "세일"로 읽힌다.
   ⚠️ 띠는 position:fixed 라 ::before 가 밖으로 새지 않도록 overflow:hidden 이 필요하고,
      글자가 광택 아래 깔리지 않도록 자식들을 z-index 위로 올려야 한다.
   ========================================================================== */
.countbar{overflow:hidden}
.countbar::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(105deg,
    transparent 32%,
    rgba(255,255,255,.14) 44%,
    rgba(255,225,77,.42) 50%,
    rgba(255,255,255,.14) 56%,
    transparent 68%);
  transform:translateX(-100%);
  animation:cbShine 4.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes cbShine{
  0%        {transform:translateX(-100%)}
  60%, 100% {transform:translateX(100%)}   /* 지나간 뒤 잠깐 쉬었다 다시 */
}
/* 광택보다 글자가 위에 오도록 */
.countbar__dot,
.countbar__label,
.countbar__timer{position:relative;z-index:1}
/* 숫자에 옅은 발광 — 검정 위에서 한 번 더 떠 보이게 */
.countbar__seg b{text-shadow:0 0 12px rgba(255,225,77,.55)}

/* 모션을 줄이도록 설정한 사용자에게는 광택을 끈다 */
@media (prefers-reduced-motion:reduce){
  .countbar::before{animation:none;opacity:0}
}

/* ==========================================================================
   순백 전환 (2026-10-25 · 본사 요청) — 바탕을 크림에서 #ffffff 로.
   토큰만 바꾸면 "흰 섹션 위의 흰 카드"가 되어 카드 윤곽이 전부 사라진다.
   그래서 카드 바닥만 아주 옅은 중성 회색(--bg-soft)으로 깔아 구조를 남긴다.
   되돌리려면 :root 의 --bg / --bg-deep / --muted / --line 네 줄과 이 블록만 지우면 된다.
   🔴 duo 두 칸은 반드시 같은 배경이어야 한다 — 한쪽이 사은품 칸처럼 보이면 안 된다.
   ========================================================================== */
.sec--white{background:var(--white);border-top:1px solid var(--line)}
.vchip{background:var(--bg-soft)}
.duo__card,
.duo__card--value{background:var(--bg-soft);border-color:var(--line)}
.mcard{box-shadow:0 20px 44px -30px rgba(24,24,28,.5)}
.mcard__media{background:var(--bg-soft)}
.mcard__feats li{background:var(--bg-soft);color:#3a3a42}
.store-card{background:var(--bg-soft)}
/* 푸터의 따뜻한 회색 두 개도 중성으로 — 흰 바탕에서 누렇게 보였다 */
.footer__tagline{color:#4a4a52}
.footer__fine{color:#9b9ba3}
.chip,.vchip{color:#3a3a42}

/* ==========================================================================
   히어로 배지 줄바꿈 (2026-10-25)
   문구가 "구성은 방문 시 안내" → "듀오 혜택은 방문 시에만 안내" 로 길어지면서
   375px 에서 .hsplit 이 389px 이 되어 두 칸이 화면 밖으로 밀렸다
   (쓸 수 있는 폭 337px. body 의 overflow-x:hidden 이 잘라내서 스크롤로는 안 드러났다).
   배지가 nowrap 이라 칸 너비를 끌고 가는 게 원인이므로, 좁은 화면에서만 줄바꿈을 허용해
   칸 너비는 "가족을 위한 한 대" 가 정하도록 되돌린다. 문구는 건드리지 않는다.
   ⚠️ 이 배지 문구를 또 고치면 375px 에서 .hsplit 실제 폭을 반드시 다시 잴 것.
   ========================================================================== */
@media (max-width:430px){
  .hsplit__item em{
    white-space:normal;        /* 칸 너비를 끌고 가지 않게 */
    border-radius:12px;        /* 두 줄이 되면 알약 모양이 어색하다 */
    line-height:1.4;
    text-align:center;
    padding:3px 10px;
    max-width:100%;
  }
}
/* 배지가 두 줄이 될 때 "방문 / 시에만" 으로 끊기지 않도록 뒷구절을 묶는다 */
.nb{white-space:nowrap}
@media (max-width:400px){
  .hsplit__item b{font-size:18px}   /* 두 칸을 히어로 좌우 여백 안으로 들여놓는다 */
}