/* 바로페이 랜딩: 스크롤 스토리 (시드니 하버 영상 → 휴대폰 앱 → PC 모니터 → 하늘 → 바로페이 AI → 탑승권)
   티라온 2시안 v2.css 의 스토리·3D 기기 구조를 그대로 가져와 바로페이에 맞게 바꿨다 */

/* ───── 1. 스토리 ───── */
.story{position:relative;height:2400vh;background:#fff}
.story-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.st-white{position:absolute;inset:0;background:linear-gradient(180deg,#fff,#F3F5F8)}
.st-white::after{content:"";position:absolute;inset:0;background:#fff;opacity:var(--wh,0)} /* 채팅 끝에 흰색으로 → 다음 섹션과 이어짐 */

.hero-photo{position:absolute;inset:0;will-change:transform,opacity;background:#000 url(media/hero-poster.jpg) 50% 50%/cover no-repeat}
.hero-photo video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-shade{position:absolute;inset:0;--grad:linear-gradient(90deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.32) 44%,rgba(0,0,0,.04) 72%),linear-gradient(0deg,rgba(0,0,0,.45),transparent 40%)}
.hero-shade::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:var(--shade,1)}
.hero-shade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fff,#F3F5F8);opacity:var(--dark,0)}
.hero-copy{position:absolute;left:max(20px,calc((100vw - 1240px)/2));top:50%;transform:translateY(-46%);color:#fff;max-width:880px;will-change:transform,opacity}
.hero-copy h1{font-size:clamp(40px,5.8vw,84px);font-weight:800;line-height:1.16;letter-spacing:-.04em}
.hero-lead{margin-top:24px;font-size:clamp(16px,1.5vw,20px);line-height:1.6;color:rgba(255,255,255,.8)}
.hero-cta{display:flex;gap:10px;margin-top:36px;flex-wrap:wrap}
.eyebrow-light{color:#9CC8FF}
.hero-badge{position:absolute;right:max(20px,calc((100vw - 1240px)/2));bottom:32px;color:rgba(255,255,255,.78);font-size:13px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.hero-badge::before{content:"";width:16px;height:16px;border-radius:50%;background:#13C29A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.scroll-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:12px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:8px;letter-spacing:.08em}
.scroll-cue span{width:22px;height:34px;border:1.5px solid rgba(255,255,255,.55);border-radius:12px;position:relative}
.scroll-cue span::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(10px)}}

/* 단계 설명 */
.caps{position:absolute;left:max(24px,calc((100vw - 1240px)/2));top:50%;width:min(440px,34vw);height:0;z-index:5;pointer-events:none}
.cap{position:absolute;left:0;top:0;transform:translateY(-50%);opacity:0;color:var(--ink);will-change:transform,opacity}
.cap h2{font-size:clamp(30px,3.4vw,50px);font-weight:800;line-height:1.26;letter-spacing:-.035em}
.cap p:last-of-type{margin-top:18px;font-size:clamp(15px,1.25vw,18px);line-height:1.6;color:var(--g6)}
.cap .eyebrow{color:var(--blue)}
.caps-top{left:0;right:0;top:calc(76px + 5vh);width:auto;text-align:center}
.caps-top .cap{left:0;right:0;transform:none;color:var(--ink);padding:0 20px}
.caps-top .cap p:last-of-type{margin-top:12px;color:var(--g6)}
.caps-top .cap .eyebrow{color:var(--blue)}

/* 납작한 휴대폰 앞면 (280x580 = 3D 휴대폰 앞면 크기). matrix3d 로 네 꼭짓점에 씌운다 */
.vphone{position:absolute;left:0;top:0;width:280px;height:580px;border-radius:44px;overflow:hidden;background:#0a0a0c;transform-origin:0 0;z-index:4;opacity:0;will-change:transform,opacity}
.vp-screen{position:absolute;left:9px;right:9px;top:9px;bottom:9px;border-radius:38px;overflow:hidden;background:#fff}
.vp-screen img{position:absolute;left:0;top:36px;width:100%;height:calc(100% - 36px)}
.vphone .p-photo{position:absolute;inset:0;background:url(media/phone-face.webp) 0 0/100% 100%;z-index:6}

/* 3D 기기 공통 */
.scene{position:absolute;inset:0;perspective:1800px;pointer-events:none;z-index:3}
.rig{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.dev{position:relative;transform-style:preserve-3d;margin-left:calc(var(--w) / -2);margin-top:calc(var(--h) / -2);width:var(--w);height:var(--h);border-radius:var(--r)}
.dev .face{position:absolute;inset:0;border-radius:inherit;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.dev .front{transform:translateZ(calc(var(--d) / 2))}
.dev .back{transform:rotateY(180deg) translateZ(calc(var(--d) / 2))}
.dev .slice{position:absolute;inset:0;border-radius:inherit;background:var(--edge)}
.glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 45%,transparent 60%);background-size:300% 100%;background-position:var(--gx,50%) 0;mix-blend-mode:screen}
.shadow{position:absolute;left:0;top:0;width:300px;height:44px;margin:-22px 0 0 -150px;border-radius:50%;background:radial-gradient(closest-side,rgba(20,40,90,.2),transparent);opacity:0;will-change:transform,opacity}

/* 휴대폰 */
.phone{--w:280px;--h:580px;--r:48px;--d:10px;--edge:linear-gradient(90deg,#5b6068,#9aa0a8 50%,#5b6068)}
.phone .front{background:#0a0a0c;box-shadow:inset 0 0 0 1.5px #2a2c31}
.phone .back{background:linear-gradient(150deg,#e9eef7,#c6cfdf);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.island{position:absolute;left:50%;top:19px;width:84px;height:24px;margin-left:-42px;border-radius:14px;background:#000;z-index:5}
.phone .island{opacity:calc(1 - var(--m,0))}

.p-screen{position:absolute;left:9px;right:9px;top:9px;height:calc(100% - 18px);border-radius:40px;overflow:hidden;background:#fff}
/* 상태 표시줄: 아일랜드 양옆에 시간·신호·배터리. 앱 화면은 그 아래부터 */
.p-status{position:absolute;inset:0 0 auto;height:36px;display:flex;align-items:center;justify-content:space-between;padding:2px 24px 0 30px;z-index:2;background:#fff;color:#0f172a;font-size:12.5px;opacity:calc(1 - var(--m,0))}
.p-status span{display:flex;gap:2.5px;align-items:flex-end}
.p-status span i{width:3px;background:currentColor;border-radius:1px}
.p-status span i:nth-child(1){height:5px}.p-status span i:nth-child(2){height:7.5px}.p-status span i:nth-child(3){height:10px}
.p-status span em{width:20px;height:10px;margin-left:5px;border-radius:3px;border:1.3px solid currentColor;position:relative}
.p-status span em::after{content:"";position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:65%;border-radius:1px;background:currentColor}
.ps{position:absolute;left:0;top:36px;width:100%;height:calc(100% - 36px);object-fit:fill;opacity:0;transform:translateX(30px);transition:opacity .45s var(--ease),transform .55s var(--ease)}
.ps.on{opacity:1;transform:none}
.ps.gone{opacity:0;transform:translateX(-30px)}
.ps-desk{position:absolute;inset:0;z-index:3;background:#fff;opacity:var(--mc,0)}

/* 휴대폰 → PC 모니터: --m 0(휴대폰) ~ 1(모니터) */
.phone .m-skin{position:absolute;inset:0;border-radius:inherit;opacity:var(--m,0)}
.phone .front .m-skin{background:#121317;box-shadow:inset 0 0 0 1.5px #34373e}
.phone .back .m-skin{background:linear-gradient(160deg,#4a4e57,#2c2f35)}
.k-brand{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:180px;color:rgba(255,255,255,.22);opacity:var(--mp,0)}
.k-brand .logo-svg{width:100%;height:auto}

/* ───── 바로페이 AI (실제 앱 홈의 AiChatTeaser 카드와 같은 모양, 470px 기준을 통째로 키운다) ───── */
.acard{width:470px;border-radius:24px;border:1px solid #F1F5F9;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.05);color:#0f172a;overflow:hidden;--conv:232px;text-align:left}
.aicard{position:absolute;left:0;top:0;transform-origin:0 0;opacity:0;z-index:5;will-change:transform,opacity;transition:box-shadow .6s var(--ease)}
.aicard.lift{box-shadow:0 40px 90px -36px rgba(15,40,90,.35),0 0 0 1px #EEF2F7}
.ac-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 20px 8px}
.ac-title{display:flex;align-items:center;gap:8px}
.ac-ic{width:32px;height:32px;border-radius:12px;background:#0f172a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18a2 2 0 012 2 2 2 0 012-2 2 2 0 01-2-2 2 2 0 01-2 2zm0-12a2 2 0 012 2 2 2 0 012-2 2 2 0 01-2-2 2 2 0 01-2 2zM9 18a6 6 0 016-6 6 6 0 01-6-6 6 6 0 01-6 6 6 6 0 016 6z'/%3E%3C/svg%3E") center/17px no-repeat}
.ac-title b{display:block;font-size:15px;font-weight:800;line-height:1.35}
.ac-title small{display:block;font-size:12px;font-weight:500;color:#94a3b8}
.ac-live{position:relative;display:flex;align-items:center;gap:4px;border-radius:999px;background:#ECFDF5;padding:4px 10px;font-size:11px;font-weight:700;color:#059669}
.ac-live i{width:6px;height:6px;border-radius:50%;background:#10B981;animation:pulse 2s infinite}
.ac-live em{font-style:normal}
.ac-live .lv-b{display:none}
.aicard.done .ac-live .lv-a{display:none}
.aicard.done .ac-live .lv-b{display:inline}
@keyframes pulse{50%{opacity:.4}}
.ac-conv{position:relative;height:var(--conv);overflow:hidden;padding:0 16px}
.ac-fade{position:absolute;left:0;right:0;top:0;height:40px;z-index:2;background:linear-gradient(#fff,rgba(255,255,255,0));pointer-events:none}
.ac-list{display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding-bottom:8px}
.m{flex:none;display:flex;flex-direction:column;height:0;opacity:0;overflow:hidden}
.m.on{height:auto;opacity:1}
.m>*{margin-top:8px}
.m p{max-width:85%;padding:8px 14px;border-radius:16px;font-size:13px;line-height:1.65}
.m.bot p,.b-box{align-self:flex-start;background:#F1F5F9;color:#1e293b;border-top-left-radius:6px}
.m.me p{align-self:flex-end;background:#0f172a;color:#fff;border-radius:16px;border-top-right-radius:6px}
.m.typing p{display:flex;gap:4px;padding:12px 14px}
.m.typing i{width:6px;height:6px;border-radius:50%;background:#94a3b8;animation:bounce 1s infinite}
.m.typing i:nth-child(2){animation-delay:.15s}.m.typing i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.b-box{max-width:88%;padding:12px 14px;border-radius:16px;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.b-box p{padding:0;background:none;max-width:none;border-radius:0}
.chip{position:relative;font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid #cbd5e1;background:#fff;color:#0f172a;transition:box-shadow .3s,border-color .3s,transform .25s var(--spring)}
.chip.sel{border-color:#0f172a;box-shadow:0 0 0 1px #0f172a}
.chip.off{color:#94a3b8}
.confirm{width:92%;align-self:flex-start;background:#F1F5F9;border-radius:16px;border-top-left-radius:6px;padding:12px 14px 14px}
.confirm>p{padding:0;background:none;max-width:none;font-size:13px}
.confirm dl,.dep{display:grid;grid-template-columns:auto 1fr;margin-top:6px;font-size:12px;width:100%}
.confirm dt,.confirm dd,.dep dt,.dep dd{padding:7px 0;border-bottom:1px dashed #cbd5e1}
.confirm dt,.dep dt{color:#64748b}
.confirm dd,.dep dd{text-align:right;font-weight:700}
.dep .ref{color:var(--blue)}
.c-acts{display:flex;gap:8px;margin-top:12px}
.c-btn,.c-sub{position:relative;display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;font-weight:700;font-size:13px}
.c-btn{background:#0f172a;color:#fff;transition:transform .25s var(--spring)}
.c-sub{background:#fff;border:1px solid #cbd5e1;color:#64748b}
/* 누르는 자리: 눌렸다가 물결이 퍼진다 */
.tap{transform:scale(.95)}
.tap::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px;border-radius:50%;background:rgba(52,143,255,.28);box-shadow:0 0 0 2px rgba(52,143,255,.5);animation:ripple .9s var(--ease-o) infinite;pointer-events:none}
@keyframes ripple{from{transform:scale(.4);opacity:1}to{transform:scale(1.5);opacity:0}}
.ac-input{display:flex;align-items:center;gap:8px;border-top:1px solid #F1F5F9;padding:12px 16px}
.ac-field{flex:1;min-width:0;height:48px;display:flex;align-items:center;border-radius:16px;border:1px solid #E2E8F0;background:#fff;padding:0 16px;font-size:14px;font-weight:500;transition:border-color .3s,box-shadow .3s}
.ac-field em{font-style:normal;white-space:nowrap;overflow:hidden}
.ac-field .ph{color:#94a3b8}
.ac-field .tx{color:#0f172a}
.ac-field.typing{border-color:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.18)}
.ac-field.typing .ph{display:none}
.ac-field.typing .tx::after{content:"";display:inline-block;width:1.5px;height:17px;margin-left:1px;vertical-align:-3px;background:#0f172a;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.ac-send{position:relative;width:48px;height:48px;flex:none;border-radius:50%;background:#0f172a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center/20px no-repeat;transition:transform .25s var(--spring)}
.mascot{position:absolute;left:0;top:0;width:clamp(150px,13vw,210px);aspect-ratio:480/623;transform-origin:50% 100%;opacity:0;z-index:4;will-change:transform,opacity}
.mascot img{position:absolute;left:0;bottom:0;width:100%;height:auto;filter:drop-shadow(0 22px 24px rgba(15,40,90,.18));transition:opacity .35s,transform .5s var(--spring)}
.mascot .ms-a{animation:sway 3.4s ease-in-out infinite}
.mascot .ms-b{opacity:0;transform:translateY(20px) scale(.9)}
.mascot.cheer .ms-a{opacity:0}
.mascot.cheer .ms-b{opacity:1;transform:none;animation:hop .9s var(--ease-o) infinite alternate}
@keyframes sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg) translateY(-6px)}}
@keyframes hop{from{transform:translateY(0)}to{transform:translateY(-14px)}}

/* ───── 2. 이럴 때 바로페이 ───── */
.cases{position:relative;height:1000vh;background:#fff}
.cases-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#fff}
.cs-copy{position:absolute;left:max(24px,calc((100vw - 1240px)/2));top:calc(76px + 6vh);z-index:3}
.cs-copy>div{position:absolute;left:0;top:0;width:min(640px,80vw);opacity:0}
.cs-copy h2{font-size:clamp(32px,3.8vw,56px);font-weight:800;line-height:1.24;letter-spacing:-.04em}
.cs-stage{position:absolute;inset:0;perspective:1600px}
.cc{position:absolute;left:0;top:0;will-change:transform,width,height}
.cc-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(var(--fl,0deg))}
.cc-f,.cc-b{position:absolute;inset:0;border-radius:var(--cr,28px);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cc-f{background:var(--t);display:flex;flex-direction:column;justify-content:flex-end;padding:24px}
.cc-f b{font-size:clamp(22px,1.9vw,28px);font-weight:800;letter-spacing:-.03em}
.cc-f span{margin-top:6px;font-size:15px;color:var(--g6)}
.cc-ic{position:absolute;left:24px;top:24px;width:56px;height:56px;border-radius:18px;background:#fff center/30px no-repeat;box-shadow:0 8px 20px -10px rgba(0,0,0,.15)}
.cc-b{transform:rotateY(180deg);background:#E9EEF5}
.cc-b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cc-b p{position:absolute;left:0;right:0;bottom:0;padding:40px 20px 18px;background:linear-gradient(transparent,rgba(0,0,0,.55));color:#fff;display:flex;align-items:baseline;gap:8px;opacity:var(--cap,1)}
.cc-b p b{font-size:20px;font-weight:800}
.cc-b p span{font-size:14px;opacity:.85}
.ph-hold{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(160deg,var(--t),#dfe6f0);color:var(--g5);font-size:13px;font-weight:600}
.ph-hold i{width:64px;height:64px;border-radius:50%;background:var(--c);opacity:.25}
.cs-full{position:absolute;inset:0;z-index:4;pointer-events:none;color:#fff;opacity:0}
.cs-full h2{position:absolute;left:max(24px,calc((100vw - 1240px)/2));bottom:16vh;font-size:clamp(34px,4.6vw,68px);font-weight:800;line-height:1.22;letter-spacing:-.04em;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.cs-noti{position:absolute;right:max(24px,calc((100vw - 1240px)/2));top:calc(76px + 4vh);width:min(380px,calc(100vw - 48px));display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:22px;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:#0f172a;box-shadow:0 18px 40px rgba(0,0,0,.2)}
.cs-noti img{width:40px;height:40px;border-radius:11px;background:var(--blue-l);padding:3px;object-fit:contain}
.cs-noti>div{flex:1}
.cs-noti p{display:flex;justify-content:space-between;font-size:13px}
.cs-noti p span{color:#94a3b8;font-size:12px}
.cs-noti>div>span{font-size:13.5px;color:#334155}
/* 목적 아이콘 (얇은 선) */
.ic-home{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23348FFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7M5 10v10h14V10M10 20v-6h4v6'/%3E%3C/svg%3E")}
.ic-cap{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313C29A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5zM6 11v5c3 2 9 2 12 0v-5M22 9v6'/%3E%3C/svg%3E")}
.ic-heart{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8A3D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E")}
.ic-key{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C5CFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l9-9M17 6l3 3M15 8l2 2'/%3E%3C/svg%3E")}
.ic-pig{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F74E8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11a7 6 0 0113-2h2v4l-2 1-1 4h-3v-2h-4v2H7l-1-3a5 5 0 01-1-4zM9 5h4'/%3E%3C/svg%3E")}
.ic-bolt{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E5A100' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3L5 14h6l-1 7 8-11h-6z'/%3E%3C/svg%3E")}
.ic-gift{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F04452' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='16' height='11' rx='1'/%3E%3Cpath d='M3 9h18M12 9v11M12 9c-2-4-6-4-6-1s4 1 6 1c2 0 6 2 6-1s-4-3-6 1'/%3E%3C/svg%3E")}

.foot{background:#0B1220;color:var(--g4);padding:56px 0;font-size:13px;line-height:1.8}
.foot-logo{display:block;color:#fff;opacity:.85;margin-bottom:16px}
.foot-s{margin-top:10px;color:var(--g5)}

@media (max-width:900px){
  .hero-copy{top:auto;bottom:110px;transform:none;right:20px}
  .hero-badge{left:20px;right:auto;bottom:24px}
  .scroll-cue{display:none}
  .caps{left:20px;right:20px;top:calc(64px + 18px);width:auto;text-align:center}
  .cap{transform:none;left:0;right:0}
  .cap h2{font-size:26px}
  .cap p:last-of-type{margin-top:8px;font-size:14.5px}
  .cap .eyebrow{margin-bottom:8px;font-size:13px}
  .caps-top{top:calc(64px + 18px)}
  .caps-chat .cap p:last-of-type{display:none}
  .cs-copy{left:20px;right:20px;top:calc(64px + 20px)}
  .cs-copy h2{font-size:28px}
  .cs-full h2{left:20px;bottom:14vh;font-size:30px}
  .cs-noti{right:16px;left:16px;width:auto;top:calc(64px + 12px)}
  .cc-f{padding:16px}
  .cc-ic{left:16px;top:16px;width:44px;height:44px;border-radius:14px;background-size:24px}
  .cc-f span{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .mascot img,.m.typing i,.tap::after{animation:none}
}
/* 바로페이 AI 설명: 왼쪽 위 (캐릭터는 그 아래, 카드 옆에 선다) */
.caps-chat{top:calc(76px + 7vh)}
.caps-chat .cap{transform:none}
@media (max-width:900px){.caps-chat{top:calc(64px + 16px);text-align:left;right:120px}}

/* ───── PC 화면 (실제 앱 PC 레이아웃: 가운데 900px, 왼쪽 사이드바 240px, 본문 520px). 1440x900 을 0.7배로 모니터 화면에 ───── */
.ps-desk{overflow:hidden}
.dk{position:absolute;left:0;top:0;width:1440px;height:900px;transform:scale(.7);transform-origin:0 0;background:#fff;color:#0f172a;font-family:var(--font)}
.dk .ti{font-weight:normal}
.dk-wrap{display:flex;width:900px;height:100%;margin:0 auto}
.dk-side{width:240px;flex:none;display:flex;flex-direction:column;padding:48px 16px 16px}
.dk-logo{display:block;padding:0 16px;margin-bottom:48px;color:#0f172a;opacity:.9}
.dk-logo .logo-svg{height:30px}
.dk-side nav{flex:1;display:flex;flex-direction:column;gap:8px}
.dk-side nav>span,.dk-info span{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:16px;font-size:15px;font-weight:700;letter-spacing:-.01em;color:#94a3b8}
.dk-side nav>span .ti{font-size:24px;color:#cbd5e1}
.dk-side nav>span.on{background:#EFF6FF;color:#348FFF}
.dk-side nav>span.on .ti{color:#348FFF}
.dk-info{margin-top:16px;padding-top:16px;border-top:1px solid #F1F5F9;display:flex;flex-direction:column;gap:4px}
.dk-info span{padding:12px 16px;font-size:14px}
.dk-info .ti{font-size:20px;color:#cbd5e1}
.dk-me{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:#F1F5F9}
.dk-me em{width:40px;height:40px;border-radius:50%;border:2px solid #fff;background:#22C55E;color:#fff;font-style:normal;font-size:13px;font-weight:800;display:grid;place-items:center;flex:none}
.dk-me div{flex:1}
.dk-me b{display:block;font-size:14px;color:#1e293b}
.dk-me small{display:block;font-size:11px;font-weight:700;color:#16A34A}
.dk-me .ti{font-size:18px;color:#cbd5e1}
.dk-main{flex:1;min-width:0}
.dk-main>*{width:520px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
.dk-head{display:flex;align-items:center;gap:4px;padding-top:32px;height:84px}
.dk-head h3{flex:1;font-size:36px;font-weight:800;letter-spacing:-.03em}
.dk-flag{width:44px;height:44px;border-radius:50%;background:#fff;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #E2E8F0}
.dk-flag::before{content:"";position:absolute;left:12px;top:12px;width:20px;height:20px;border-radius:50%;background:linear-gradient(#CD2E3A 50%,#0047A0 50%);transform:rotate(-34deg)}
.dk-av{position:relative;width:44px;height:44px;margin-left:8px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,.1);background:#22C55E;color:#fff;font-size:14px;font-weight:800;display:grid;place-items:center}
.dk-av i{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border-radius:50%;border:2px solid #fff;background:#22C55E}
.dk-tabs{display:flex;gap:8px;margin-top:16px}
.dk-tabs span{height:32px;padding:0 16px;border-radius:999px;display:inline-flex;align-items:center;font-size:13px;font-weight:700;background:#EFF6FF;color:#348FFF}
.dk-tabs .on{background:#348FFF;color:#fff}
.dk-main>.dk-ai{width:470px;margin-top:25px;padding:0}
.dk-rate{margin-top:24px!important;width:472px!important;padding:24px!important;border-radius:24px;background:#F8FAFC}
.dk-rl{font-size:11px;font-weight:600;color:#64748b}
.dk-rv{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:18px;font-weight:800}
.dk-rv span{font-size:10px;padding:3px 8px;border-radius:999px;background:#EF4444;color:#fff}
.dk-rv .ti{margin-left:auto;font-size:22px;color:#94a3b8}
.dk-rate svg{display:block;width:100%;height:170px;margin-top:22px}
.dk-up{margin-top:14px;font-size:10px;color:#94a3b8}
.dk-talk{position:absolute;right:32px;bottom:34px;width:56px;height:56px;border-radius:50%;background:#FEE500 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4C7 4 3 7.2 3 11.2c0 2.5 1.6 4.7 4 6L6 21l4-2.5c.6.1 1.3.2 2 .2 5 0 9-3.2 9-7.2S17 4 12 4z' fill='%231a1a1a'/%3E%3C/svg%3E") center/26px no-repeat;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.dk-ai.gone{visibility:hidden}