/* PREFARM home v3 — 입체감·역동성 레이어 (v2 CSS 위에 덮음. transform/opacity/translate 만 애니메이션) */
:root{--pf3-ease:cubic-bezier(.2,.7,.2,1)}

/* ===== 휴대폰 3D: 층 그림자 + 화면 반사광 (정적, 모든 환경) ===== */
.pfv2-phone{
  box-shadow:0 1px 1px rgba(41,45,39,.14),0 3px 6px rgba(41,45,39,.10),0 12px 22px rgba(41,45,39,.12),0 30px 48px rgba(41,45,39,.14),inset 0 0 0 1px rgba(255,255,255,.14);
  transform:perspective(1100px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) translate3d(0,0,var(--z,0px));
  backface-visibility:hidden}
.pfv2-phone::after{content:"";position:absolute;top:0;bottom:0;left:-30%;width:160%;pointer-events:none;border-radius:inherit;
  background:linear-gradient(112deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.08) 28%,rgba(255,255,255,0) 44%,rgba(255,255,255,0) 66%,rgba(255,255,255,.10) 100%);
  transform:translateX(calc(var(--mx,0)*14%))}
.pfv2-stage{perspective:1500px;perspective-origin:50% 38%}
.pfv3-floor{position:absolute;left:12cqw;right:12cqw;top:98cqw;height:9cqw;border-radius:50%;background:radial-gradient(ellipse at center,rgba(41,45,39,.20),rgba(41,45,39,0) 70%);pointer-events:none}

/* hero: 3대 */
.pfv2-hero .pfv2-p-back{width:33cqw;left:4cqw;top:24cqw;--ry:20deg;--rx:2deg;--z:-70px;z-index:1}
.pfv2-hero .pfv2-p-third{width:33cqw;left:63cqw;top:24cqw;--ry:-20deg;--rx:2deg;--z:-70px;z-index:1}
.pfv2-hero .pfv2-p-main{width:43cqw;left:28.5cqw;top:8cqw;--ry:-6deg;--rx:3deg;--z:40px;z-index:3}
.pfv2-hero .pfv2-c1{z-index:6}.pfv2-hero .pfv2-c2{z-index:6}
.pfv2-hero .pfv3-floor{top:100cqw}
/* how / business / farmer */
.pfv2-p-how{--ry:-10deg;--rx:2deg}
.pfv2-pb-l{--ry:18deg;--z:-30px}.pfv2-pb-r{--ry:-18deg;--z:-30px}.pfv2-pb-c{--z:30px;--rx:2deg}
.pfv2-pf-l{--ry:14deg;--z:-30px}.pfv2-pf-r{--ry:-8deg;--rx:2deg;--z:20px}

/* 섹션 배경 블롭 (그라디언트만, blur 필터 없음) */
.pfv3-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;display:block}
.pfv3-bg b{position:absolute;border-radius:50%;display:block}
.pfv3-bg b:nth-child(1){width:46vmax;height:46vmax;max-width:760px;max-height:760px;right:-12%;top:-14%;background:radial-gradient(circle at 40% 40%,rgba(233,248,207,.95),rgba(233,248,207,0) 68%)}
.pfv3-bg b:nth-child(2){width:38vmax;height:38vmax;max-width:620px;max-height:620px;left:-14%;bottom:-18%;background:radial-gradient(circle at 50% 50%,rgba(126,205,0,.14),rgba(126,205,0,0) 66%)}
.pfv2-sec>.pfv3-bg~*{position:relative}
.pfv2-sec .pfv2-wrap,.pfv2-sec .pfv2-stripwrap,.pfv2-sec .pfv2-note{position:relative;z-index:1}
#hero>.pfv3-bg~*,#how-it-works>.pfv3-bg~*{position:relative;z-index:1}

/* ===== hover (모션 허용 환경, 레이아웃 불변: translate + 그림자) ===== */
@media (prefers-reduced-motion:no-preference){
 .pfv2-btn{transition:translate .18s var(--pf3-ease),box-shadow .18s ease,filter .18s ease}
 .pfv2-btn:hover{translate:0 -3px;box-shadow:0 12px 24px rgba(41,45,39,.22);filter:brightness(1.1)}
 .pfv2-btn:active{translate:0 0;box-shadow:0 2px 6px rgba(41,45,39,.2)}
 .prefarm-store-badge{transition:translate .18s var(--pf3-ease),filter .18s ease}
 .prefarm-store-badge:hover{translate:0 -3px;filter:drop-shadow(0 8px 10px rgba(41,45,39,.25))}
 [data-card]{transition:translate .25s var(--pf3-ease),box-shadow .25s ease}
 [data-card]:hover{translate:0 -6px;box-shadow:0 18px 36px rgba(41,45,39,.12)}
 .pfv2-gal li .pfv2-phone,.pfv2-strip li .pfv2-phone{transition:translate .25s var(--pf3-ease),box-shadow .25s ease}
 .pfv2-gal li:hover .pfv2-phone,.pfv2-strip li:hover .pfv2-phone{translate:0 -8px;box-shadow:0 2px 2px rgba(41,45,39,.14),0 8px 14px rgba(41,45,39,.12),0 24px 36px rgba(41,45,39,.16),0 44px 64px rgba(41,45,39,.18),inset 0 0 0 1px rgba(255,255,255,.14)}
 .pfv2-tab{transition:translate .18s var(--pf3-ease),background-color .2s ease}
 .pfv2-tab:hover{translate:0 -2px}
 .pfv2-chip{transition:translate .18s var(--pf3-ease)}.pfv2-chip:hover{translate:0 -2px}
}

/* ===== 등장·움직임 (pfv3-js 가 있을 때만 = reduced-motion 이 아닐 때만) ===== */
.pfv3-js [data-rv]{opacity:0;transform:translate3d(0,28px,0);transition:opacity .75s var(--pf3-ease) var(--rd,0ms),transform .75s var(--pf3-ease) var(--rd,0ms)}
.pfv3-js [data-rv].in,.pfv3-fallback [data-rv]{opacity:1;transform:none}
.pfv3-js [data-draw]{transform:scaleY(0);transform-origin:50% 0;transition:transform 1.4s var(--pf3-ease) .15s}
.pfv3-js [data-draw].in,.pfv3-fallback [data-draw]{transform:none}
.pfv3-js .pfv2-process li .pfv2-pn{transform:scale(.6);transition:transform .5s var(--pf3-ease) calc(var(--rd,0ms) + 150ms)}
.pfv3-js .pfv2-process li.in .pfv2-pn,.pfv3-fallback .pfv2-process li .pfv2-pn{transform:none}
.pfv3-count{display:inline-block;min-width:.62em;text-align:center;font-variant-numeric:tabular-nums}

/* hero 등장 + 둥둥(float): translate 속성만 사용 → transform(틸트)과 충돌 없음 */
@keyframes pfv3-rise{from{opacity:0;translate:0 46px}to{opacity:1;translate:0 0}}
@keyframes pfv3-float{from{translate:0 0}to{translate:0 -10px}}
@keyframes pfv3-float2{from{translate:0 0}to{translate:0 8px}}
@keyframes pfv3-drift{from{translate:0 0}to{translate:3% 4%}}
.pfv3-js .pfv2-hero .pfv2-phone{will-change:transform,translate}
.pfv3-js .pfv2-hero .pfv2-p-main{animation:pfv3-rise .9s var(--pf3-ease) .15s both,pfv3-float 6.5s ease-in-out 1.1s infinite alternate;transition:transform .12s cubic-bezier(.2,.8,.2,1)}
.pfv3-js .pfv2-hero .pfv2-p-back{animation:pfv3-rise .9s var(--pf3-ease) .35s both,pfv3-float2 7.5s ease-in-out 1.3s infinite alternate;transition:transform .12s cubic-bezier(.2,.8,.2,1)}
.pfv3-js .pfv2-hero .pfv2-p-third{animation:pfv3-rise .9s var(--pf3-ease) .5s both,pfv3-float 8.5s ease-in-out 1.5s infinite alternate;transition:transform .12s cubic-bezier(.2,.8,.2,1)}
.pfv3-js .pfv2-hero .pfv2-call{animation:pfv3-rise .8s var(--pf3-ease) .9s both}
.pfv3-js .pfv2-hero .pfv2-c1{animation:pfv3-rise .8s var(--pf3-ease) .9s both,pfv3-float2 6s ease-in-out 1.7s infinite alternate}
.pfv3-js .pfv2-hero .pfv2-c2{animation:pfv3-rise .8s var(--pf3-ease) 1.05s both,pfv3-float 6.8s ease-in-out 1.85s infinite alternate}
.pfv3-js .pfv3-bg b:nth-child(1){animation:pfv3-drift 22s ease-in-out infinite alternate}
.pfv3-js .pfv3-bg b:nth-child(2){animation:pfv3-drift 28s ease-in-out -8s infinite alternate-reverse}
/* 마우스 틸트(JS 가 --mx/--my 설정, 데스크톱 포인터만) */
.pfv3-js .pfv2-hero[data-tilt-on] .pfv2-phone{transform:perspective(1100px) rotateY(calc(var(--ry,0deg) + var(--mx,0)*24deg + var(--dx,0deg))) rotateX(calc(var(--rx,0deg) + var(--my,0)*-12deg + var(--dy,0deg))) translate3d(calc(var(--mx,0)*var(--k,0)*1px),calc(var(--my,0)*var(--k,0)*.3px),var(--z,0px))}
.pfv2-hero .pfv2-p-main{--k:16}.pfv2-hero .pfv2-p-back{--k:-8}.pfv2-hero .pfv2-p-third{--k:-8}

/* 띠 포커스: 중앙 가까운 장이 커지고 나머지는 작게 (JS 가 --s/--t 설정) */
.pfv3-js .pfv2-strip li .pfv2-phone{transform:perspective(900px) rotateY(calc(var(--t,0)*-9deg)) scale(var(--s,1));transform-origin:50% 50%}
.pfv3-js .pfv2-strip li .pfv2-cap{opacity:var(--o,1)}

/* 모바일: 효과를 가볍게 (틸트·float·블롭 이동 끔, 각도 완화) */
@media (max-width:809.98px){
 .pfv3-js .pfv2-hero .pfv2-phone,.pfv3-js .pfv2-hero .pfv2-call,.pfv3-js .pfv3-bg b{animation-iteration-count:1!important}
 .pfv3-js .pfv2-hero .pfv2-p-main{animation:pfv3-rise .7s var(--pf3-ease) .1s both}
 .pfv3-js .pfv2-hero .pfv2-p-back{animation:pfv3-rise .7s var(--pf3-ease) .25s both}
 .pfv3-js .pfv2-hero .pfv2-p-third{animation:pfv3-rise .7s var(--pf3-ease) .4s both}
 .pfv3-js .pfv2-hero .pfv2-c1{animation:pfv3-rise .7s var(--pf3-ease) .6s both}
 .pfv3-js .pfv2-hero .pfv2-c2{animation:pfv3-rise .7s var(--pf3-ease) .7s both}
 .pfv3-js .pfv3-bg b{animation:none}
 .pfv2-hero .pfv2-p-back{width:31cqw;left:1cqw;top:26cqw;--ry:14deg;--z:-40px}
 .pfv2-hero .pfv2-p-third{width:31cqw;left:68cqw;top:26cqw;--ry:-14deg;--z:-40px}
 .pfv2-hero .pfv2-p-main{width:44cqw;left:28cqw;top:8cqw;--ry:-4deg}
 .pfv2-pb-l{--ry:10deg}.pfv2-pb-r{--ry:-10deg}.pfv2-pf-l{--ry:8deg}.pfv2-p-how{--ry:-6deg}
 .pfv3-js [data-rv]{transform:translate3d(0,18px,0);transition-duration:.55s}
 .pfv3-js .pfv2-strip li .pfv2-phone{transform:scale(var(--s,1))}
}
/* reduced-motion: 정적 3D 모양만 유지, 모든 애니메이션·전환 끔 */
@media (prefers-reduced-motion:reduce){
 .pfv2-phone,.pfv2-phone::after{transition:none!important;animation:none!important}
 .pfv2-phone::after{transform:none}
}

/* ===== 스토어 배지: 현행 공식 파일, 두 배지 높이 동일(--bh), 가이드라인 여백 ===== */
.pfv3-badges{--bh:44px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pfv3-badges .prefarm-store-badge{display:block;position:relative;overflow:hidden;height:var(--bh);line-height:0;flex:0 0 auto}
.pfv3-badges .pfv3-as{width:calc(var(--bh)*2.9916)}
.pfv3-badges .pfv3-as img{display:block;width:100%!important;height:100%!important}
.pfv3-badges .pfv3-gp{width:calc(var(--bh)*3.3571)}
.pfv3-badges .pfv3-gp img{display:block;position:absolute;max-width:none!important;width:auto!important;height:calc(var(--bh)*1.4881)!important;left:calc(var(--bh)*-.244);top:calc(var(--bh)*-.244)}
.pfv2-badges-dl.pfv3-badges{--bh:48px}
.pfv2-badges-hero.pfv3-badges{margin-top:20px!important;gap:12px!important}
/* 데스크톱 플로팅 배지 (≥810px): 히어로 버튼이 화면 밖일 때만, 문의 양식·푸터가 보이면 숨김 */
.pfv3-float{display:none}
.pfv3-badges-float{--bh:40px;flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:10px}
@media (min-width:810px){
 .pfv3-float{display:block;position:fixed;right:24px;bottom:24px;z-index:49;padding:12px;background:rgba(255,255,255,.97);border:1px solid var(--pf-line);border-radius:16px;box-shadow:0 12px 32px rgba(41,45,39,.18);opacity:0;visibility:hidden;transform:translate3d(0,16px,0)}
 .pfv3-float.show{opacity:1;visibility:visible;transform:none}
}
@media (min-width:810px) and (prefers-reduced-motion:no-preference){
 .pfv3-float{transition:opacity .25s ease,transform .3s var(--pf3-ease),visibility 0s linear .3s}
 .pfv3-float.show{transition:opacity .25s ease,transform .3s var(--pf3-ease)}
}
/* 모바일 고정 바: 위 줄에 배지, 아래 줄에 신청 버튼 (겹치지 않음) */
@media (max-width:809.98px){
 .pfv2-bar-m{flex-direction:column;gap:8px;padding-top:8px}
 .pfv3-bar-badges{--bh:40px;justify-content:center;gap:12px;flex-wrap:nowrap}
 .pfv3-bar-btns{display:flex;gap:10px;width:100%}
}
.pfv3-bar-badges,.pfv3-bar-btns{width:100%}

/* ===== v3.1 ===== */
/* 히어로: 드래그 회전 (데스크톱 마우스). 놓으면 부드럽게 원위치 */
@media (hover:hover) and (pointer:fine) and (min-width:810px){
 .pfv3-js .pfv2-hero{cursor:grab;user-select:none;-webkit-user-select:none}
 .pfv3-js .pfv2-hero.dragging{cursor:grabbing}
 .pfv3-js .pfv2-hero.dragging .pfv2-phone{transition:none!important}
 .pfv3-js .pfv2-hero.releasing .pfv2-phone{transition:transform .7s cubic-bezier(.2,.8,.2,1)!important}
}
.pfv2-hero .pfv2-phone img{-webkit-user-drag:none;user-select:none}
/* 띠: 좌우 삼각형 버튼 + 마우스 드래그 */
.pfv2-stripwrap{position:relative}
.pfv3-side{position:absolute;top:40%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:1px solid var(--pf-line);background:rgba(255,255,255,.96);box-shadow:0 8px 22px rgba(41,45,39,.18);z-index:6;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.pfv3-side i{display:block;width:0;height:0;border-style:solid}
.pfv2-prev.pfv3-side{left:14px}.pfv2-next.pfv3-side{right:14px}
.pfv2-prev.pfv3-side i{border-width:10px 15px 10px 0;border-color:transparent var(--pf-olive) transparent transparent;margin-right:4px}
.pfv2-next.pfv3-side i{border-width:10px 0 10px 15px;border-color:transparent transparent transparent var(--pf-olive);margin-left:4px}
.pfv3-side[disabled]{opacity:0;visibility:hidden;pointer-events:none}
.pfv3-side:hover{background:#fff}
@media (prefers-reduced-motion:no-preference){.pfv3-side{transition:opacity .2s ease,translate .18s var(--pf3-ease)}.pfv3-side:hover{translate:0 -2px}}
@media (hover:hover) and (pointer:fine){.pfv2-strip{cursor:grab}.pfv2-strip.dragging{cursor:grabbing;scroll-snap-type:none}.pfv2-strip.dragging *{user-select:none}}
.pfv2-strip img{-webkit-user-drag:none}
/* HOW: 콜아웃과 STEP 버튼 사이 여백 확대 (화면 크기를 줄이고 콜아웃을 위로) */
.pfv2-p-how{width:37cqw;left:31.5cqw;top:3cqw}
.pfv2-c3{top:84cqw}
@media (max-width:809.98px){
 .pfv2-p-how{width:42cqw;left:29cqw;top:3cqw}
 .pfv2-c3{top:98cqw}
}