/* 박스풀 가맹 페이지 모션 스타일 — motion.js와 짝. 숨김 상태는 JS가 html.fx를 붙일 때만 적용(JS 없으면 그대로 보임). */
.fr-hero .wrap{display:grid;gap:4px}
.fr-burst{margin:18px 0 0}
.fr-burst canvas{display:block;width:100%;height:230px}
.fr-burst p{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0 0}
@media(min-width:980px){.fr-hero .wrap{grid-template-columns:1.15fr .85fr;align-items:end;gap:40px}.fr-burst{margin:0}}
.fr-adv{position:relative;overflow:hidden;background:var(--ink);color:#DADADA;padding:56px 0}
.fr-adv .wrap{position:relative;z-index:1}
.fr-adv h2{color:#fff;margin:6px 0 0}
.fr-adv .eyebrow{color:#7FDCD0;margin:0}
.adv{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.adv li{background:#242424;border:1px solid #363636;border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:6px}
.adv svg{width:30px;height:30px;color:var(--mint);margin-bottom:4px}
.adv b{color:#fff;font-size:19px}
.adv em{font-style:normal;color:#FFC81E;font-weight:800;font-size:14px}
.adv a{color:#7FDCD0;font-weight:700}
@media(min-width:760px){.adv{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.adv{grid-template-columns:repeat(3,1fr)}}
.fr-liquid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
.fx .fr-adv.wait{background:transparent}
.fx .fr-adv.wait .fr-liquid{display:block}
.fx .fr-adv .eyebrow,.fx .fr-adv h2,.fx .fr-adv .adv li{transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
.fx .fr-adv.wait:not(.in) .eyebrow,.fx .fr-adv.wait:not(.in) h2,.fx .fr-adv.wait:not(.in) .adv li{opacity:0;transform:translateY(16px)}