/* 지페 · 홈 콘텐츠 보강 (역할 HA): ONE PLATFORM 소개 · 광고 배너 · FAQ 캐릭터
   토큰·버튼은 site.css. 생성: tools/v5/blocks_extra.py, 동작: js/home_content.js

   ┌─ 재사용 컴포넌트 .faqchar (FAQ 캐릭터) ──────────────────────────────────────────────┐
   │ 마크업은 blocks_extra.faqchar() 가 만든다 (장식용이라 aria-hidden, 질문·답은 그대로):        │
   │   <div class="faqchar" data-faqchar data-idle=".." data-open=".." data-close=".." data-tap="..">│
   │     <p class="faqchar__bubble"><span class="faqchar__txt">…</span></p>                      │
   │     <div class="faqchar__stage"><span class="faqchar__shadow"></span>                        │
   │       <span class="faqchar__lean"><span class="faqchar__act"><img class="faqchar__img" …></span></span>│
   │     </div>                                                                                  │
   │   </div>                                                                                    │
   │ · 같은 <section> 안의 .qa__q[aria-expanded] 를 JS(home_content.js · faq)가 지켜보다가,           │
   │   질문이 열리면 끄덕임(.is-nod)+말풍선 교체, 닫히면 말풍선만 교체, 캐릭터를 누르면 점프(.is-hop).   │
   │ · 크기는 --w 하나로 정한다 (기본 clamp(150px,15vw,214px)). 데스크톱은 옆 열(.faq__side)에 서고,  │
   │   1023px 이하에서는 .faqchar 가 display:contents 로 풀려 제목 옆 목록 위로 빼꼼 나온다.          │
   │ · 다른 FAQ(store.html·설명서)에 쓰려면: ① 섹션에 faq--char 클래스, ② 제목+faqchar 를 .faq__side │
   │   로 묶기, ③ 같은 CSS·JS 를 링크. 이미지는 img/mascot_think.webp (403×900, 투명).            │
   │   img/mascot_faq.webp(217×234, 책자)는 해상도가 낮아 큰 크기에는 쓰지 않는다.                  │
   │ · 모션 줄이기: 등장·숨쉬기·끄덕임 모두 끄고 정지 상태로 보인다.                                │
   └──────────────────────────────────────────────────────────────────────────────────────────┘ */

/* ═══ ONE PLATFORM ═══════════════════════════════════════════════════════════ */
.pf{position:relative;padding:clamp(80px,10vw,176px) 0;background:var(--mist);color:var(--ink);overflow:clip}
.pf__eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:.6em 1em;margin-bottom:clamp(20px,2.6vw,44px);color:#4e5968;font-size:clamp(14px,1.1vw,19px);font-weight:700;letter-spacing:-.01em}
.pf__eyebrow b{padding:.42em .95em;border-radius:999px;background:var(--blue);color:#fff;font-size:.84em;font-weight:800;letter-spacing:.1em}
.pf__lead{max-width:21em;font-size:clamp(28px,3.7vw,70px);font-weight:800;letter-spacing:-.045em;line-height:1.28}
.pf__lead em{font-style:normal;color:var(--blue)}
.pf__w{transition:opacity .3s linear}  /* opacity 는 js/home_content.js 가 스크롤 진행도로 정함 */

.pf__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;grid-template-areas:"txt viz" "btns viz";column-gap:clamp(32px,5vw,96px);row-gap:clamp(22px,2.2vw,34px);align-items:start;margin-top:clamp(40px,5vw,96px)}
.pf__txt{grid-area:txt}
.pf__viz{grid-area:viz}
.pf__btns{grid-area:btns;display:flex;flex-wrap:wrap;gap:12px}
.pf__p{color:#4e5968;font-size:clamp(17px,1.35vw,23px);line-height:1.8;text-wrap:pretty}
.pf__nt{margin-top:1.1em;color:#5f6b7a;font-size:15px;line-height:1.6}

.pf .btn{transform:translate3d(var(--mx,0px),var(--my,0px),0)}
.pf .btn:hover{transform:translate3d(var(--mx,0px),calc(var(--my,0px) - 2px),0)}
.pf__go span{display:inline-block;transition:transform .35s var(--spring)}
.pf__go:hover span,.pf__go:focus-visible span{transform:translateX(4px)}

/* 흐름 도식 */
.pf__viz{--g:clamp(32px,4.2vw,70px);--th:clamp(120px,11vw,168px);position:relative;padding:clamp(18px,2.2vw,36px);border-radius:var(--r4);background:#fff;box-shadow:var(--sh1)}
.hc-on .pf__viz{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s var(--out),transform 1s var(--out)}
.hc-on .pf.in .pf__viz{opacity:1;transform:none}
.pf__stage{display:grid;grid-template-columns:minmax(0,1fr) var(--g) minmax(0,1fr) var(--g) minmax(0,1fr);align-items:start}
.pf__n{display:flex;flex-direction:column;align-items:stretch;gap:.35em;padding:0;border:0;border-radius:var(--r2);background:none;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pf__n b{margin-top:.55em;font-size:clamp(17px,1.35vw,23px);font-weight:800;letter-spacing:-.03em;line-height:1.3}
.pf__d{color:#5f6b7a;font-size:clamp(14px,1.02vw,17px);line-height:1.45}
.pf__n:focus-visible{outline-offset:6px}
.pf__tile{position:relative;display:grid;place-items:center;height:var(--th);border-radius:var(--r2);background:var(--mist);overflow:hidden;transition:background-color .45s,box-shadow .45s}
.pf__n.is-on .pf__tile{background:#e8efff;box-shadow:inset 0 0 0 2px var(--blue)}
.pf__n:hover .pf__tile{background:#e8efff}
.pf__n.is-on b{color:var(--blue)}

/* 연결선 + 지나가는 점 */
.pf__ln{position:relative;display:block;align-self:start;height:2px;margin-top:calc(var(--th) / 2 - 1px);border-radius:2px;background:var(--line);container-type:inline-size}
.pf__ln::after{content:"";position:absolute;right:-1px;top:-4px;width:9px;height:9px;border-top:2px solid #c3cad2;border-right:2px solid #c3cad2;transform:rotate(45deg);transition:border-color .4s}
.pf__fill{position:absolute;inset:0;border-radius:2px;background:var(--blue);transform:scaleX(0);transform-origin:0 50%}
.pf__dot{position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(30,77,216,.2);opacity:0}
.pf__viz[data-step="1"] .pf__ln--a::after,.pf__viz[data-step="2"] .pf__ln--a::after,.pf__viz[data-step="2"] .pf__ln--b::after,.pf__viz[data-step="all"] .pf__ln::after{border-color:var(--blue)}
.pf__viz[data-step="1"] .pf__ln--a .pf__fill,.pf__viz[data-step="2"] .pf__ln .pf__fill,.pf__viz[data-step="all"] .pf__ln .pf__fill{transform:scaleX(1)}
.pf__viz[data-step="0"] .pf__ln--a .pf__fill{animation:pfFill 1.2s .6s var(--out) both}
.pf__viz[data-step="1"] .pf__ln--b .pf__fill{animation:pfFill 1.2s .7s var(--out) both}
.pf__viz[data-step="0"] .pf__ln--a .pf__dot{animation:pfDot 1.2s .6s var(--out) both}
.pf__viz[data-step="1"] .pf__ln--b .pf__dot{animation:pfDot 1.2s .7s var(--out) both}
@keyframes pfFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pfDot{0%{opacity:0;transform:translate3d(0,0,0) scale(.4)}14%{opacity:1;transform:translate3d(0,0,0) scale(1)}86%{opacity:1}100%{opacity:0;transform:translate3d(100cqw,0,0) scale(.7)}}

/* 되돌아오는 길 (주문 상태 알림) */
.pf__back{position:relative;display:block;height:24px;margin:clamp(12px,1.4vw,20px) calc((100% - 2 * var(--g)) / 6) 0;border:2px solid var(--line);border-top:0;border-radius:0 0 16px 16px;container-type:inline-size}
.pf__back::before{content:"";position:absolute;left:-6px;top:-2px;width:9px;height:9px;border-top:2px solid #c3cad2;border-left:2px solid #c3cad2;transform:rotate(45deg);transition:border-color .4s}
.pf__back em{position:absolute;left:50%;bottom:-14px;padding:.2em .9em;background:#fff;color:#5f6b7a;font-size:13.5px;font-style:normal;font-weight:700;white-space:nowrap;transform:translateX(-50%);transition:color .4s}
.pf__back .pf__dot{left:-5px;top:auto;bottom:-6px}
.pf__back .pf__fill{display:none}
.pf__viz[data-step="2"] .pf__back::before,.pf__viz[data-step="all"] .pf__back::before{border-color:var(--blue)}
.pf__viz[data-step="2"] .pf__back em,.pf__viz[data-step="all"] .pf__back em{color:var(--blue)}
.pf__viz[data-step="2"] .pf__back .pf__dot{animation:pfBack 1.5s .9s var(--out) both}
@keyframes pfBack{0%{opacity:0;transform:translate3d(100cqw,0,0) scale(.4)}12%{opacity:1;transform:translate3d(100cqw,0,0) scale(1)}88%{opacity:1}100%{opacity:0;transform:translate3d(0,0,0) scale(.7)}}

/* 타일 1 · 회원앱 (QR · AI 주문) */
.pf__phone{position:relative;display:flex;flex-direction:column;gap:6px;width:clamp(50px,4.8vw,66px);height:calc(var(--th) - 26px);padding:15px 7px 0;border:3px solid var(--ink);border-radius:15px;background:#fff}
.pf__phone::before{content:"";position:absolute;left:50%;top:5px;width:16px;height:4px;margin-left:-8px;border-radius:3px;background:var(--ink)}
.pf__r{display:block;height:8px;border-radius:4px;background:#e5e8eb;transform-origin:0 50%}
.pf__r--ai{height:13px;background:var(--ai)}
.pf__r--s{width:62%}
.pf__viz[data-step="0"] .pf__r--ai{animation:pfGrow .8s .2s var(--out) both}
.pf__viz[data-step="0"] .pf__r:not(.pf__r--ai){animation:pfRise .6s calc(.45s + var(--k, 0) * .12s) var(--out) both}
.pf__r:nth-child(2){--k:0}.pf__r:nth-child(3){--k:1}.pf__r:nth-child(4){--k:2}
@keyframes pfGrow{from{transform:scaleX(.25)}to{transform:scaleX(1)}}
@keyframes pfRise{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}
.pf__chip{position:absolute;top:10px;right:8px;display:inline-flex;align-items:center;gap:.4em;padding:.42em .85em;border-radius:999px;background:#fff;color:var(--ink);font-size:13px;font-weight:800;line-height:1.2;white-space:nowrap;box-shadow:0 8px 18px -8px rgba(25,31,40,.4);opacity:0;transform:scale(.8)}
.pf__chip svg{flex:none;width:1.25em;height:1.25em;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pf__viz[data-step="0"] .pf__chip--q,.pf__viz[data-step="2"] .pf__chip--n{animation:pfChip .55s .25s var(--spring) both}
.pf__viz[data-step="all"] .pf__chip{opacity:1;transform:none}
@keyframes pfChip{from{opacity:0;transform:translate3d(0,6px,0) scale(.8)}to{opacity:1;transform:none}}

/* 타일 2 · 결제 (다중결제, 카드 최대 3장) */
.pf__cards{position:relative;display:block;width:clamp(48px,4.6vw,62px);height:clamp(32px,3vw,40px)}
.pf__cd{position:absolute;inset:0;border-radius:8px;box-shadow:0 8px 14px -8px rgba(25,31,40,.45);transition:transform .8s var(--spring)}
.pf__cd::after{content:"";position:absolute;left:7px;top:8px;width:11px;height:8px;border-radius:2px;background:rgba(255,255,255,.72)}
.pf__cd--1{background:#1e4dd8;transform:translate(clamp(-44px,-3.6vw,-30px),12px) rotate(-12deg)}
.pf__cd--2{background:#6f93ff;transform:translate(0,-8px)}
.pf__cd--3{background:#b9cbff;transform:translate(clamp(30px,3.6vw,44px),12px) rotate(12deg)}
.pf__viz[data-step="1"] .pf__cd,.pf__viz[data-step="2"] .pf__cd,.pf__viz[data-step="all"] .pf__cd{transform:translate(0,var(--y,0))}
.pf__viz[data-step="1"] .pf__cd--1,.pf__viz[data-step="2"] .pf__cd--1,.pf__viz[data-step="all"] .pf__cd--1{--y:9px;transition-delay:.15s}
.pf__viz[data-step="1"] .pf__cd--2,.pf__viz[data-step="2"] .pf__cd--2,.pf__viz[data-step="all"] .pf__cd--2{--y:4px;transition-delay:.25s}
.pf__viz[data-step="1"] .pf__cd--3,.pf__viz[data-step="2"] .pf__cd--3,.pf__viz[data-step="all"] .pf__cd--3{--y:-1px;transition-delay:.35s}
.pf__ok{position:absolute;right:calc(50% - 46px);top:calc(50% - 44px);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--blue);box-shadow:0 6px 14px -6px rgba(30,77,216,.7);opacity:0;transform:scale(.3)}
.pf__ok svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pf__viz[data-step="1"] .pf__ok,.pf__viz[data-step="2"] .pf__ok,.pf__viz[data-step="all"] .pf__ok{opacity:1;transform:none;transition:opacity .3s .75s,transform .6s .75s var(--spring)}

/* 타일 3 · 지페가맹점 · POS */
.pf__pos{display:grid;justify-items:center}
.pf__scr{display:grid;align-content:start;gap:6px;width:clamp(86px,8.2vw,114px);height:clamp(54px,5.2vw,72px);padding:9px;border-radius:10px;background:var(--navy)}
.pf__scr u{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.26);text-decoration:none;transform-origin:0 50%}
.pf__scr u:nth-child(2){width:72%}.pf__scr u:nth-child(3){width:48%}
.pf__stand{position:relative;display:block;width:22px;height:9px;background:var(--navy);opacity:.82}
.pf__stand::after{content:"";position:absolute;left:50%;bottom:0;width:46px;height:4px;margin-left:-23px;border-radius:3px;background:var(--navy)}
.pf__chip--n svg{transform-origin:50% 12%}
.pf__viz[data-step="2"] .pf__scr u:first-child,.pf__viz[data-step="all"] .pf__scr u:first-child{background:var(--wave)}
.pf__viz[data-step="2"] .pf__scr u:first-child{animation:pfGrow .7s .35s var(--out) both}
.pf__viz[data-step="2"] .pf__chip--n svg{animation:pfRing 1s .7s ease-in-out both}
@keyframes pfRing{0%,100%{transform:rotate(0)}15%{transform:rotate(16deg)}35%{transform:rotate(-14deg)}55%{transform:rotate(9deg)}75%{transform:rotate(-5deg)}}

/* 수수료 줄 */
.pf__fee{display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(20px,3vw,56px);margin-top:clamp(40px,5vw,88px);padding-top:clamp(22px,2.4vw,40px);border-top:1px solid rgba(25,31,40,.12)}
.pf__pill{position:relative;display:inline-flex;align-items:baseline;gap:.5em;padding:.5em 1.15em;border-radius:999px;background:#fff;box-shadow:var(--sh1);font-size:clamp(18px,1.7vw,30px);font-weight:800;letter-spacing:-.03em;overflow:hidden}
.pf__pill b{display:inline-block;color:var(--blue);font-size:1.35em;line-height:1}
.pf__pill::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,216,77,.6) 50%,transparent 70%);transform:translate3d(-120%,0,0);pointer-events:none}
.hc-on .pf.in .pf__pill b{animation:pfStamp .8s .25s var(--spring) both}
.hc-on .pf.in .pf__pill::after{animation:pfShine 1.5s 1s var(--out) 1 both}
.pf__pill:hover::after{animation:pfShine 1.1s var(--out) 1 both}
@keyframes pfStamp{0%{opacity:0;transform:scale(1.9) rotate(-8deg)}100%{opacity:1;transform:none}}
@keyframes pfShine{to{transform:translate3d(120%,0,0)}}
.pf__close{color:var(--ink);font-size:clamp(17px,1.3vw,22px);font-weight:700;line-height:1.6}
.pf__fn{flex:1 0 100%;color:#5f6b7a;font-size:15px;line-height:1.55}

@media (max-width:1023px){
  .pf__grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"txt" "viz" "btns"}
}
@media (max-width:719px){
  .pf__viz{--g:0px;--th:clamp(104px,30vw,124px)}
  .pf__stage{display:flex;flex-direction:column;align-items:stretch}
  .pf__n{display:grid;grid-template-columns:clamp(126px,38vw,150px) minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;align-items:center}
  .pf__n .pf__tile{grid-row:1 / span 2}
  .pf__n b{align-self:end;margin-top:0}
  .pf__d{align-self:start}
  .pf__ln{align-self:flex-start;width:2px;height:34px;margin:0 0 0 calc(clamp(126px,38vw,150px) / 2 - 1px);container-type:size}
  .pf__ln::after{right:auto;left:-4px;top:auto;bottom:-1px;transform:rotate(135deg)}
  .pf__fill{transform:scaleY(0);transform-origin:50% 0}
  .pf__dot{left:-4px;top:-5px}
  .pf__viz[data-step="1"] .pf__ln--a .pf__fill,.pf__viz[data-step="2"] .pf__ln .pf__fill,.pf__viz[data-step="all"] .pf__ln .pf__fill{transform:scaleY(1)}
  .pf__viz[data-step="0"] .pf__ln--a .pf__fill{animation-name:pfFillY}
  .pf__viz[data-step="1"] .pf__ln--b .pf__fill{animation-name:pfFillY}
  .pf__viz[data-step="0"] .pf__ln--a .pf__dot{animation-name:pfDotY}
  .pf__viz[data-step="1"] .pf__ln--b .pf__dot{animation-name:pfDotY}
  .pf__back{display:none}
  .pf__chip{font-size:12px;top:8px;right:6px}
}
@keyframes pfFillY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pfDotY{0%{opacity:0;transform:translate3d(0,0,0) scale(.4)}14%{opacity:1;transform:translate3d(0,0,0) scale(1)}86%{opacity:1}100%{opacity:0;transform:translate3d(0,100cqh,0) scale(.7)}}

/* ═══ 광고 배너 ══════════════════════════════════════════════════════════════ */
.adb{padding:0 0 clamp(64px,8vw,140px);background:#fff}
.adb__car{position:relative}
.adb__view{position:relative;aspect-ratio:1920 / 390;border-radius:var(--r3);background:#e8efff;box-shadow:var(--sh1);overflow:hidden;isolation:isolate;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.adb__track{position:absolute;inset:0}
.adb__s{position:absolute;inset:0;visibility:visible;transform:translate3d(calc((var(--o, 0) + var(--dx, 0)) * 100% + var(--o, 0) * 3px),0,0);transition:transform .75s var(--out),visibility 0s}
.adb__s.is-far{visibility:hidden;transition:transform .75s var(--out),visibility 0s .75s}
.adb__s.no-tr,.adb.is-drag .adb__s{transition:none}
.adb__poster,.adb__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;-webkit-user-drag:none}
.adb__v{opacity:0;transition:opacity .3s}
.adb__s.is-live .adb__v{opacity:1}
.adb__tag{position:absolute;left:14px;top:12px;z-index:3;padding:.3em .75em;border-radius:999px;background:rgba(17,19,23,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:13px;font-weight:800;letter-spacing:.06em;pointer-events:none}
.adb__ar{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:46px;height:46px;margin-top:-23px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 10px 22px -8px rgba(25,31,40,.5);color:var(--ink);cursor:pointer;opacity:0;transform:scale(.85);transition:opacity .25s,transform .4s var(--spring)}
.adb__ar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.adb__ar--p{left:14px}
.adb__ar--n{right:14px}
.adb__view:hover .adb__ar,.adb__ar:focus-visible{opacity:1;transform:none}
.adb__ar:active{transform:scale(.92)}
@media (hover:none){.adb__ar{width:36px;height:36px;margin-top:-18px;opacity:.9;transform:none}.adb__ar svg{width:18px;height:18px}.adb__ar--p{left:8px}.adb__ar--n{right:8px}}

.adb__bar{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:14px}
.adb__caps{display:grid;flex:1;min-width:0}
.adb__c{grid-area:1 / 1;align-self:center;color:#4e5968;font-size:clamp(15px,1.15vw,19px);font-weight:700;letter-spacing:-.02em;line-height:1.4}
.adb__c a{color:var(--blue);text-decoration:underline;text-underline-offset:.2em}
.adb__c:not(.is-on){visibility:hidden}
.adb.is-ready .adb__c{transition:opacity .35s,transform .5s var(--out),visibility 0s}
.adb.is-ready .adb__c:not(.is-on){opacity:0;transform:translate3d(0,8px,0);transition:opacity .25s,transform .4s var(--out),visibility 0s .25s}
.adb__ctl{display:flex;flex:none;align-items:center;gap:10px}
.adb__num{color:#5f6b7a;font-size:14px;font-variant-numeric:tabular-nums}
.adb__num b{color:var(--ink);font-weight:800}
.adb__dots{display:flex;align-items:center}
.adb__dot{position:relative;display:grid;place-items:center;flex:none;width:24px;height:32px;padding:0;border:0;background:none;cursor:pointer;transition:width .45s var(--out)}
.adb__dot::before{content:"";width:8px;height:8px;border-radius:4px;background:#cdd3da;transition:width .45s var(--out),background-color .3s}
.adb__dot:hover::before{background:#9aa4b0}
.adb__dot.is-on{width:52px}
.adb__dot.is-on::before{width:36px;background:#dfe5ee}
.adb__dot i{position:absolute;left:8px;top:12px;width:36px;height:8px;border-radius:4px;background:var(--blue);opacity:0;transform:scaleX(0);transform-origin:0 50%}
.adb__dot.is-on i{opacity:1}
.adb__pause{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:var(--mist);color:var(--ink);cursor:pointer;transition:background-color .2s,transform .3s var(--spring)}
.adb__pause:hover{background:#e5e8eb}
.adb__pause:active{transform:scale(.9)}
.adb__ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.adb__ic--play{display:none;fill:currentColor;stroke-width:1.6}
.adb.is-userpaused .adb__ic--pause{display:none}
.adb.is-userpaused .adb__ic--play{display:block}
/* JS가 없으면 조작부를 숨기고 첫 장만 보인다 */
.adb:not(.is-ready) .adb__ar,.adb:not(.is-ready) .adb__ctl{display:none}
@media (max-width:760px){
  .adb__view{aspect-ratio:3.3 / 1;border-radius:var(--r2)}
  .adb__ar{display:none}
  .adb__tag{left:10px;top:8px;font-size:12px}
  .adb__bar{flex-wrap:wrap}
  .adb__caps{flex:1 0 100%}
}

/* ═══ FAQ 캐릭터 ═════════════════════════════════════════════════════════════ */
.faqchar{--w:clamp(150px,15vw,214px);position:relative;width:var(--w);margin-top:clamp(14px,1.6vw,26px);pointer-events:none}
.faqchar__bubble{position:relative;display:inline-block;min-width:calc(var(--w) * .66);max-width:calc(var(--w) * 1.45);margin:0 0 18px;padding:.68em 1.05em;border-radius:18px;background:var(--mist);color:var(--ink);font-size:clamp(15px,1.1vw,18px);font-weight:800;letter-spacing:-.025em;line-height:1.35;transition:background-color .35s}
.faqchar__bubble::after{content:"";position:absolute;left:calc(var(--w) * .45 - 7px);bottom:-6px;width:14px;height:14px;border-radius:3px;background:inherit;transform:rotate(45deg)}
.faqchar.is-hot .faqchar__bubble{background:var(--wave)}
.faqchar__bubble.is-pop{animation:fcPop .55s var(--spring)}
.faqchar__stage{position:relative;width:100%;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.faqchar__shadow{position:absolute;left:10%;right:6%;bottom:-9px;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(25,31,40,.3),rgba(25,31,40,0))}
.faqchar__lean{display:block;transform-origin:50% 100%;transform:rotate(var(--lean, 0deg));transition:transform .7s var(--out)}
.faqchar__act{display:block;transform-origin:50% 100%}
.faqchar__img{display:block;width:100%;height:auto;transform-origin:50% 100%;-webkit-user-drag:none;user-select:none}
.hc-on .faqchar__act{transition:opacity .7s,transform 1s var(--spring)}
.hc-on .faqchar:not(.is-in) .faqchar__act{opacity:0;transform:translate3d(0,34px,0)}
.hc-on .faqchar:not(.is-in) .faqchar__bubble{opacity:0}
.hc-on .faqchar__bubble{transition:background-color .35s,opacity .5s .5s}
.faqchar.is-live .faqchar__img{animation:fcBreath 5.4s ease-in-out infinite}
.faqchar.is-live .faqchar__shadow{animation:fcShadow 5.4s ease-in-out infinite}
.faqchar.is-nod .faqchar__act{animation:fcNod .85s var(--out)}
.faqchar.is-hop .faqchar__act{animation:fcHop .8s var(--out)}
.faqchar.is-hop .faqchar__shadow{animation:fcHopSh .8s var(--out)}
@keyframes fcBreath{0%,100%{transform:translate3d(0,0,0) scale(1,1)}50%{transform:translate3d(0,-3px,0) scale(1.007,1.014)}}
@keyframes fcShadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.94);opacity:.82}}
@keyframes fcNod{0%{transform:none}22%{transform:translate3d(0,6px,0) rotate(2.4deg) scale(1.025,.95)}55%{transform:translate3d(0,-7px,0) rotate(-1.2deg) scale(.99,1.035)}100%{transform:none}}
@keyframes fcHop{0%{transform:none}28%{transform:translate3d(0,-24px,0) scale(.97,1.04)}52%{transform:translate3d(0,0,0) scale(1.05,.94)}72%{transform:translate3d(0,-7px,0)}100%{transform:none}}
@keyframes fcHopSh{0%,100%{transform:scaleX(1);opacity:1}28%{transform:scaleX(.7);opacity:.5}}
@keyframes fcPop{0%{opacity:.4;transform:scale(.86)}100%{opacity:1;transform:none}}

/* 홈 FAQ: 데스크톱 = 제목 + 캐릭터가 서 있는 옆 열(스크롤 따라옴), 오른쪽에 목록 */
.faq--char .faq__in{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);gap:clamp(36px,5.5vw,96px);align-items:start;width:min(100% - 40px,1120px);margin:0 auto}
.faq--char .faq__side{position:sticky;top:calc(var(--hdr) + 28px)}
.faq--char .faq__side .sec__t{text-align:left}
.faq--char .faq__list{max-width:none;margin:0}
@media (max-width:1279px){.is-story .faq--char .faq__in{padding-left:56px}}
@media (max-width:1023px){
  .faq--char .faq__in{display:block;width:min(100% - 32px,860px);padding-left:0}
  .faq--char .faq__side{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t c" "b c";column-gap:10px;align-items:end}
  .faq--char .faq__side .sec__t{grid-area:t;align-self:end;font-size:clamp(28px,7.4vw,44px)}
  .faq--char .faq__list{margin-top:0}
  .faqchar{--w:clamp(104px,30vw,176px);display:contents}
  .faqchar__bubble{grid-area:b;justify-self:start;align-self:start;margin:14px 0 20px;min-width:0;max-width:100%;font-size:clamp(14.5px,3.9vw,17px)}
  .faqchar__bubble::after{left:auto;right:-6px;bottom:auto;top:calc(50% - 7px)}
  .faqchar__stage{grid-area:c;align-self:end;width:var(--w);height:calc(var(--w) * 1.1);clip-path:inset(-90px -40px 0 -40px)}
  .faqchar__shadow{display:none}
  .hc-on .faqchar:not(.is-in) .faqchar__act{transform:translate3d(0,46%,0)}
}

/* ═══ 모션 줄이기: 전부 정지 상태 ═════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .pf *,.pf *::before,.pf *::after,.adb *,.adb *::before,.adb *::after,.faqchar,.faqchar *{animation:none !important;transition-duration:.01s !important;transition-delay:0s !important}
  .pf__w{opacity:1}
  .pf__viz{opacity:1;transform:none}
  .pf__fill{transform:scaleX(1)}
  .pf__dot{display:none}
  .faqchar__act,.faqchar__bubble{opacity:1;transform:none}
  .adb__s{transition:none !important}
}