/* 메인 「BAKOODA IN ACTION」 — 6가지 사용법 (PC 3칸×2줄), 중요한 부분만 확대 */
.product-films{max-width:1280px;margin:0 auto;padding:40px 20px 56px;color:var(--ink)}
.pf-note{margin:18px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted)}

.pfx{--ease:cubic-bezier(.22,1,.36,1);--glow:color-mix(in srgb,var(--accent) 55%,transparent)}
.pfx-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 18px}
.pfx-kicker{margin:0;font:700 11px/1.5 var(--mono,ui-monospace,monospace);letter-spacing:.24em;color:var(--accent)}
.pfx-title{margin:0;font:800 clamp(20px,2.2vw,28px)/1.3 var(--sans,sans-serif);letter-spacing:-.04em;color:var(--ink)}

/* PC: 3칸 × 2줄, 좌우 여백 넉넉히. 마우스를 올린 칸만 조금 커진다 (transform만 써서 다른 칸은 움직이지 않음) */
.pfx-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 18px;margin-bottom:40px}
.pfx-card{position:relative;min-width:0;transform-origin:50% 40%;transition:transform .55s var(--ease)}
@media (hover:hover) and (min-width:900px){
  .pfx-row .pfx-card:is(:hover,:focus-within){transform:scale(1.12);z-index:3}
  .pfx-row .pfx-card:nth-child(3n+1){transform-origin:0 40%}
  .pfx-row .pfx-card:nth-child(3n){transform-origin:100% 40%}
}
@media (min-width:900px){
  #productFilms.product-films{max-width:none;padding:56px clamp(64px,16vw,320px) 64px}
  #productFilms .pfx,#productFilms .pf-note{max-width:860px;margin-left:auto;margin-right:auto}
  .pfx-row .pfx-screen{aspect-ratio:16/10}
}

/* 화면: 창 틀·주소창 없이 잘라낸 화면만 */
.pfx-screen{position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:#05080f;isolation:isolate;
  border:1px solid color-mix(in srgb,var(--accent) 24%,#1d2638);
  box-shadow:0 22px 50px -30px rgba(0,0,0,.8),0 0 30px -18px var(--glow);
  transition:box-shadow .45s var(--ease),border-color .45s var(--ease),transform .55s var(--ease)}
.pfx-card:is(:hover,:focus-within) .pfx-screen{border-color:color-mix(in srgb,var(--accent) 60%,#1d2638);box-shadow:0 30px 70px -30px rgba(0,0,0,.85),0 0 46px -10px var(--glow)}
.pfx-screen::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,transparent 62%,rgba(3,6,12,.55));box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.pfx-pane{position:absolute;inset:0;overflow:hidden;opacity:0;will-change:transform,opacity}
.pfx-pane.on{opacity:1}
.pfx-layer{position:absolute;left:0;top:0;width:300%;aspect-ratio:1440/900}
.pfx-layer img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.pfx-ring{position:absolute;border-radius:10px;pointer-events:none;opacity:0;transform:scale(1.06);transition:opacity .3s ease,transform .45s var(--ease);
  box-shadow:0 0 0 3px #5aa2ff,0 0 0 9px rgba(90,162,255,.18),0 0 30px 4px rgba(90,162,255,.5)}
.pfx-ring.on{opacity:1;transform:none}

/* 마우스 커서: 사진 위 좌표로 움직이고, 화면에서는 늘 비슷한 크기 */
.pfx-cur{position:absolute;z-index:4;left:50%;top:50%;width:var(--cur,1.4%);aspect-ratio:1;pointer-events:none;transition:width var(--curT,0ms) cubic-bezier(.16,.84,.24,1)}
.pfx-cur>svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));transform-origin:22% 10%;transition:transform .12s ease}
.pfx-cur.down>svg{transform:scale(.82)}
.pfx-carry{position:absolute;left:78%;top:88%;display:none;align-items:center;gap:.35em;padding:.32em .6em .32em .32em;border-radius:.45em;background:rgba(255,255,255,.97);color:#141b2b;font:700 10px/1 var(--sans,sans-serif);white-space:nowrap;box-shadow:0 10px 22px -6px rgba(0,0,0,.6),0 0 18px -4px rgba(90,162,255,.55);transform:rotate(-4deg);transform-origin:0 0}
.pfx-cur.carry .pfx-carry{display:flex;opacity:.62}
.pfx-carry b{display:grid;place-items:center;min-width:2.6em;height:1.6em;padding:0 .35em;border-radius:.3em;color:#fff;font-size:.78em;letter-spacing:.04em}
.pfx-carry em{font-style:normal}
.pfx-carry.stack{box-shadow:4px 4px 0 -1px rgba(255,255,255,.75),8px 8px 0 -2px rgba(255,255,255,.5),12px 12px 0 -3px rgba(255,255,255,.3),0 14px 26px -6px rgba(0,0,0,.6)}
.pfx-carry.gone{animation:pfx-gone .24s ease-in forwards}
@keyframes pfx-gone{to{opacity:0;transform:rotate(-4deg) scale(.4) translate(-30%,-30%)}}
/* 키 안내·내려받기 알림 (화면 위에 겹쳐 뜸) */
.pfx-key{position:absolute;z-index:7;left:50%;bottom:9%;padding:6px 11px;border-radius:9px;background:rgba(10,16,30,.86);border:1px solid rgba(124,182,255,.45);color:#e6efff;font:700 11.5px/1 var(--sans,sans-serif);white-space:nowrap;box-shadow:0 10px 24px -10px rgba(0,0,0,.8);opacity:0;transform:translate(-50%,8px);transition:opacity .18s ease,transform .25s cubic-bezier(.2,.9,.3,1);pointer-events:none}
.pfx-key.on{opacity:1;transform:translate(-50%,0)}
.pfx-dl{position:absolute;z-index:7;right:5%;top:6%;display:flex;align-items:center;gap:8px;min-width:46%;padding:8px 11px 10px 9px;border-radius:11px;background:rgba(14,22,40,.94);border:1px solid rgba(124,182,255,.4);color:#e6efff;box-shadow:0 16px 30px -12px rgba(0,0,0,.85),0 0 24px -8px rgba(90,162,255,.6);opacity:0;transform:translateY(-10px) scale(.96);transition:opacity .2s ease,transform .3s cubic-bezier(.2,.9,.3,1);pointer-events:none;overflow:hidden}
.pfx-dl.on{opacity:1;transform:none}
.pfx-dl i{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#2f7bff;color:#fff;font:700 13px/1 var(--sans,sans-serif);font-style:normal}
.pfx-dl b{display:block;font:700 11.5px/1.2 var(--sans,sans-serif)}
.pfx-dl small{display:block;margin-top:2px;font:600 10px/1.2 var(--sans,sans-serif);color:#8fb7ff}
.pfx-dl s{position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,#2f7bff,#7cb6ff);transform-origin:0 50%;transform:scaleX(0)}
.pfx-dl.on s{animation:pfx-bar .6s ease-out forwards}
@keyframes pfx-bar{to{transform:scaleX(1)}}

/* 누르는 자리: 사진 위 좌표라 확대와 함께 움직인다 */
.pfx-tap{position:absolute;width:0;height:0;pointer-events:none}
.pfx-tap::before,.pfx-tap::after{content:"";position:absolute;left:-16px;top:-16px;width:32px;height:32px;border-radius:50%;opacity:0}
.pfx-tap::before{background:rgba(124,182,255,.35);border:2px solid #9cc8ff}
.pfx-tap.go::before{animation:pfx-tap .55s ease-out forwards}
.pfx-tap.go::after{border:2px solid #9cc8ff;animation:pfx-tap2 .7s .08s ease-out forwards}
@keyframes pfx-tap{0%{opacity:0;transform:scale(1.6)}30%{opacity:1;transform:scale(.7)}100%{opacity:0;transform:scale(1)}}
@keyframes pfx-tap2{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.4)}}

/* 글: 화면 아래 번호·제목. 설명은 마우스를 올렸을 때만 제목 아래 비워 둔 자리에 나타난다 (화면을 가리거나 밀지 않게) */
.pfx-card{outline:none}
.pfx-copy{position:relative;padding:12px 2px 0}
.pfx-step{margin:0 0 5px;display:flex;align-items:center;gap:7px;font:600 12px/1 var(--sans,sans-serif);color:var(--muted)}
.pfx-step b{font:700 10.5px/1 var(--mono,ui-monospace,monospace);letter-spacing:.1em;color:var(--accent)}
.pfx-copy h3{margin:0;font:800 15px/1.35 var(--sans,sans-serif);letter-spacing:-.035em;color:var(--ink);word-break:keep-all;transition:color .3s}
.pfx-body{margin:6px 0 0;min-height:4.65em;font-size:12px;line-height:1.55;color:var(--muted);word-break:keep-all;opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .35s var(--ease)}
.pfx-card:is(:hover,:focus-within,:focus-visible) .pfx-body{opacity:1;transform:none}
.pfx-card:is(:hover,:focus-within,:focus-visible) .pfx-copy h3{color:var(--accent)}

/* 좁은 화면: 옆으로 넘겨 보기 */
@media (max-width:899px),(hover:none){
  .pfx-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -20px;padding:0 20px 6px}
  .pfx-row::-webkit-scrollbar{display:none}
  .pfx-card{flex:0 0 min(64vw,260px);scroll-snap-align:start}
  .pfx-body{opacity:1;transform:none;min-height:0}
}
@media (prefers-reduced-motion:reduce){.pfx *{transition:none!important;animation:none!important}}

/* 스크립트가 돌기 전(검색엔진·JS 꺼짐) 기본 모양 */
.pf-grid:not(.pfx){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.pf-grid:not(.pfx) .pf-card{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:20px 22px}
.pf-grid:not(.pfx) .pf-copy{display:flex;flex-direction:column;gap:6px}
.pf-grid:not(.pfx) small{font:700 10.5px/1 var(--mono,ui-monospace,monospace);letter-spacing:.14em;color:var(--muted)}
.pf-grid:not(.pfx) h3{margin:4px 0 0;font-size:17px;color:var(--ink)}
.pf-grid:not(.pfx) p{margin:0;font-size:13.5px;line-height:1.65;color:var(--muted)}
.pf-grid:not(.pfx) a{font-weight:700;font-size:13px;color:var(--accent);text-decoration:none}
@media (max-width:899px){.pf-grid:not(.pfx){grid-template-columns:1fr}}
#productFilms{overflow-anchor:none}