/* B안: C안에서 가져온 수정 (PRICING, PARTNER, 이점 자동 슬라이드). 순서는 B안 그대로. */
/* ===== PRICING: 비용이 발생하는 시점을 보여주는 타임라인 ===== */
.pr2{padding:96px 0 104px}
.pr-flow{max-width:960px;margin:52px auto 0;padding:44px 32px 32px;border:1px solid var(--g2);border-radius:24px;background:var(--card,#fff)}
.pr-steps{position:relative;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}
.pr-steps:before,.pr-steps:after{content:"";position:absolute;left:12.5%;right:12.5%;top:21px;height:3px;border-radius:2px}
.pr-steps:before{background:var(--g2)}
.pr-steps:after{background:var(--p);transform-origin:left;transform:scaleX(1);transition:transform 1.8s cubic-bezier(.16,.84,.44,1)}
.pr-steps li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.pr-steps em{display:grid;place-items:center;width:44px;height:44px;border:3px solid var(--p);border-radius:50%;background:var(--p);color:#fff;font-style:normal;font-size:20px;font-weight:800;transition:background .4s,border-color .4s,transform .4s}
.pr-steps em:after{content:"\2713"}
.pr-steps li.last em{width:52px;height:52px;margin-top:-4px;font-size:22px;box-shadow:0 0 0 6px rgba(118,52,203,.16)}
.pr-steps b{margin-top:4px;color:var(--ink);font-size:16px;letter-spacing:-.01em}
.pr-steps span{padding:5px 14px;border-radius:999px;background:var(--pl);color:var(--pd);font-size:13px;font-weight:800}
.pr-steps li.last span{background:var(--p);color:#fff}
.pr-brk{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:28px}
.pr-brk p{margin:0;padding:0 8px;text-align:center}
.pr-brk p:before{content:"";display:block;height:12px;margin:0 22px 14px;border:2px solid;border-top:0;border-radius:0 0 12px 12px}
.pr-brk .free{grid-column:1/4}
.pr-brk .free:before{border-color:var(--g3)}
.pr-brk .paid{grid-column:4}
.pr-brk .paid:before{border-color:var(--p)}
.pr-brk b{display:block;color:var(--ink);font-size:15px}
.pr-brk .paid b{color:var(--p)}
.pr-brk small{display:block;margin-top:4px;color:var(--g4);font-size:13px}
.pr-note{max-width:960px;margin:18px auto 0;color:var(--g4);font-size:12.5px;text-align:center}
/* 화면에 들어오면 선이 차오르고, 단계가 하나씩 켜진다 */
.pr-flow:not(.in) .pr-steps:after{transform:scaleX(0)}
.pr-flow:not(.in) .pr-steps em{background:var(--card,#fff);border-color:var(--g3);color:transparent}
.pr-flow.in .pr-steps li:nth-child(2) em{transition-delay:.5s}
.pr-flow.in .pr-steps li:nth-child(3) em{transition-delay:1s}
.pr-flow.in .pr-steps li:nth-child(4) em{transition-delay:1.5s}
@media(prefers-reduced-motion:reduce){.pr-steps:after,.pr-steps em{transition:none!important}.pr-flow:not(.in) .pr-steps:after{transform:none}.pr-flow:not(.in) .pr-steps em{background:var(--p);border-color:var(--p);color:#fff}}
@media(max-width:700px){
  .pr2{padding:64px 0 72px}
  .pr-flow{padding:28px 20px 24px}
  .pr-steps{grid-template-columns:1fr;gap:22px;justify-items:start}
  .pr-steps:before,.pr-steps:after{left:21px;right:auto;top:22px;bottom:70px;width:3px;height:auto}
  .pr-steps:after{transform-origin:top}
  .pr-steps li{flex-direction:row;gap:14px;text-align:left}
  .pr-steps li.last em{margin-top:0}
  .pr-brk{display:none}
}
html[data-theme="dark"] .pr-steps b{color:var(--ink)}
html[data-theme="dark"] .pr-steps span{background:var(--pl);color:var(--pd)}
html[data-theme="dark"] .pr-steps li.last span{background:var(--p);color:#fff}
html[data-theme="dark"] .pr-brk .paid b{color:#b79cff}
html[data-theme="dark"] .pr-brk .paid:before{border-color:#8f6fd6}
.pr2 .section-head h2{font-size:clamp(32px,4.2vw,46px)}
.pr2 .section-head h2 em{color:var(--p)}
html[data-theme="dark"] .pr2 .section-head h2 em{color:#b79cff}

/* PARTNER: 두 줄(판매 채널 / 결제·인증 파트너), 위아래 여백을 넉넉히 줘서 한 화면처럼 보이게 */
.partners{padding:128px 0;min-height:min(100vh,860px);display:flex;flex-direction:column;justify-content:center}
.partners .section-head{margin-bottom:60px}
.partner-marquee{gap:18px}
.partner-track{animation-duration:36s}
.partner-track.rev{animation-duration:42s}
@media(max-width:900px){.partners{min-height:0;padding:88px 0}.partners .section-head{margin-bottom:40px}}
html[data-theme="dark"] .feature-num{color:rgba(183,156,255,.28)}
/* 다크: FEATURES 아이콘 박스를 또렷하게 */
html[data-theme="dark"] .feature-card .icon{background:rgba(167,139,250,.22);color:#d9c8ff;box-shadow:inset 0 0 0 1px rgba(183,156,255,.45)}
html[data-theme="dark"] .feature-card .icon svg{stroke:#d9c8ff}
html[data-theme="dark"] .feature-card:hover .icon{background:rgba(167,139,250,.32)}
/* ===== REAL IMPACT: 자동 슬라이드 (탭의 진행 막대가 다 차면 다음 카드) ===== */
.imp-tabs button{position:relative;overflow:hidden}
.imp-tabs.auto button.on:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#7634CB;transform-origin:left;animation:imp-prog 7s linear forwards}
.imp-tabs.auto.paused button.on:after{animation-play-state:paused}
html[data-theme="light"] .imp-tabs.auto button.on:after{background:rgba(255,255,255,.8)}
@keyframes imp-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.imp-tabs.auto button.on:after{display:none}}


/* B안: C안에서 가져온 분석 결과 (기능 칩 + 적합도) */
/* ===== 분석 결과: 폰기프트 적합도 (프로그레스바 + 종합 %) ===== */
.fit{grid-column:1/-1;margin-top:6px;padding:20px 22px 22px;border:1px solid var(--g2);border-radius:14px;background:var(--pl)}
.fit h3{margin:0 0 14px;color:var(--ink);font-size:14.5px;font-weight:800;letter-spacing:-.01em;word-break:keep-all}
.fit-list{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.fit-list li{display:grid;grid-template-columns:150px 1fr 44px;align-items:center;gap:12px;color:var(--g5);font-size:13px;font-weight:700}
.fit-list .bar{height:10px;border-radius:5px;background:rgba(118,52,203,.14);overflow:hidden}
.fit-list .bar i{display:block;width:0;height:100%;border-radius:5px;background:var(--p);transition:width 1s cubic-bezier(.16,.84,.44,1)}
.fit-list b{color:var(--ink);font-size:13px;text-align:right}
.fit-total{display:flex;align-items:baseline;gap:10px;margin-top:18px;padding-top:16px;border-top:1px dashed var(--g3);opacity:.35;transition:opacity .4s}
.fit-total.on{opacity:1}
.fit-total span{color:var(--g5);font-size:13px;font-weight:700}
.fit-total b{margin-left:auto;color:var(--p);font-size:46px;font-weight:800;line-height:1;letter-spacing:-.03em}
.fit-total b i{font-style:normal}
.fit-total em{padding:5px 12px;border-radius:999px;background:var(--p);color:#fff;font-size:12.5px;font-style:normal;font-weight:800;align-self:center}
.fit-total em:empty{display:none}
html[data-theme="dark"] .fit{background:#1f1830}
html[data-theme="dark"] .fit-total b{color:#b79cff}
html[data-theme="dark"] .fit-list .bar{background:rgba(167,139,250,.18)}
html[data-theme="dark"] .fit-list .bar i{background:#a78bfa}
@media(prefers-reduced-motion:reduce){.fit-list .bar i,.fit-total{transition:none}}
@media(max-width:560px){.fit{padding:16px 16px 18px}.fit-list li{grid-template-columns:1fr 40px;gap:6px 10px}.fit-list li span{grid-column:1/-1}.fit-total b{font-size:38px}}
.sc2-out .fit-list li{padding-left:0;animation:none}
.sc2-out .fit-list li:before{content:none}

/* 적합도: 종합 프로그레스바 하나만 */
.fit{padding:22px 24px 24px}
.fit h3{margin-bottom:16px}
.fit-bar{height:16px;border-radius:8px;background:rgba(118,52,203,.14);overflow:hidden}
.fit-bar i{display:block;width:0;height:100%;border-radius:8px;background:linear-gradient(90deg,#8b5cf6,#7634CB);transition:width 2s cubic-bezier(.16,.84,.44,1)}
.fit .fit-total{margin-top:14px;padding-top:0;border-top:0;opacity:1;justify-content:flex-end;gap:12px}
.fit .fit-total b{margin-left:0;font-size:52px}
html[data-theme="dark"] .fit-bar{background:rgba(167,139,250,.18)}
html[data-theme="dark"] .fit-bar i{background:linear-gradient(90deg,#8f6fd6,#b79cff)}
@media(prefers-reduced-motion:reduce){.fit-bar i{transition:none}}

/* 분석 결과의 기능 칩: 세 칸 아래, 적합도 위의 한 줄 */
.sc2-out>.sc2-key{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:6px 0 0;padding:16px 20px;border:1px solid var(--g2);border-radius:14px;background:var(--card,#fff)}
.sc2-out>.sc2-key p{flex:0 0 auto;margin:0 6px 0 0;color:var(--p);font-size:13px;font-weight:800}
.sc2-out>.sc2-key span{padding:7px 14px;font-size:13.5px}
html[data-theme="dark"] .sc2-out>.sc2-key p{color:#b79cff}
@media(max-width:560px){.sc2-out>.sc2-key p{flex:0 0 100%;margin:0}}

/* 히어로/체험 섹션 데모: 세 칸 아래에 기능 칩 줄과 적합도 바가 붙으므로 높이를 미리 확보 */
.sc2-demo .sc2-out{align-content:start;min-height:560px}
.sc2-demo .sc2-out>.sc2-key,.sc2-demo .sc2-out>.fit{margin-top:0}
@media(max-width:900px){.sc2-demo .sc2-out{min-height:0}}

/* 히어로/체험 데모: 분석이 끝나면 아래로 펼쳐지는 영역 (처음에는 높이를 차지하지 않음) */
.sc2-demo .sc2-out{min-height:0}
.sc2-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s cubic-bezier(.16,.84,.44,1)}
.sc2-more.open{grid-template-rows:1fr}
.sc2-more>div{min-height:0;overflow:hidden;display:grid;gap:14px}
.sc2-more.open>div{padding-top:14px}
.sc2-more .sc2-key{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding:16px 20px;border:1px solid var(--g2);border-radius:14px;background:var(--card,#fff)}
.sc2-more .sc2-key p{flex:0 0 auto;margin:0 6px 0 0;color:var(--p);font-size:13px;font-weight:800}
.sc2-more .sc2-key span{padding:7px 14px;font-size:13.5px}
.sc2-more .fit{margin:0}
html[data-theme="dark"] .sc2-more .sc2-key p{color:#b79cff}
@media(prefers-reduced-motion:reduce){.sc2-more{transition:none}}
@media(max-width:560px){.sc2-more .sc2-key p{flex:0 0 100%;margin:0}}

/* ===== 성능: 렉을 줄이기 위한 보정 ===== */
.reveal{filter:none!important}                                                /* 요소마다 blur 필터를 걸지 않는다 */
.header{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(255,255,255,.98)}
html[data-theme="dark"] .header{background:rgba(15,11,26,.98)}
.fit-bar i{width:100%;transform:scaleX(0);transform-origin:left;transition:none}
.partners.off .partner-track{animation-play-state:paused}                    /* 화면 밖에서는 로고 흐름 정지 */
.section.partners,.section.pricing,.section.faq,.section.benefits,.section.uses,.section.features,.closing{content-visibility:auto;contain-intrinsic-size:auto 760px}

/* 히어로 데모: 기능 칩/적합도 영역은 처음부터 자리를 잡고, 스켈레톤으로 대기했다가 같은 자리에서 나타난다 */
.sc2-more{grid-template-rows:1fr;transition:none}
.sc2-more>div{padding-top:14px}
.sc2-more .sc2-key,.sc2-more .sc2-key.sk{min-height:68px;box-sizing:border-box}
.sc2-more .fit,.sc2-more .fit.sk{min-height:196px;box-sizing:border-box}
.sc2-more .pop,.sc2-more .fit:not(.sk){animation:sc-pop-in .45s cubic-bezier(.16,.84,.44,1) both}
@keyframes sc-pop-in{from{opacity:0;transform:translateY(8px)}}
.sc2-more .sk{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sc2-more .fit.sk{display:block;padding:22px 24px;border:1px solid var(--g2);border-radius:14px;background:var(--pl,transparent)}
.sc2-more .sk>i{display:block;border-radius:8px;background:linear-gradient(90deg,rgba(128,118,160,.16) 25%,rgba(128,118,160,.32) 50%,rgba(128,118,160,.16) 75%);background-size:200% 100%;animation:sc-shimmer 1.2s linear infinite}
.sk-l{width:150px;height:14px}.sk-p{width:92px;height:32px;border-radius:999px!important}
.fit.sk .sk-t{width:240px;height:16px;margin-bottom:18px}
.fit.sk .sk-bar{width:100%;height:16px;border-radius:8px;margin-bottom:16px}
.fit.sk .sk-n{width:120px;height:46px;margin-left:auto}
@media(prefers-reduced-motion:reduce){.sc2-more .sk>i,.sc2-more .pop,.sc2-more .fit:not(.sk){animation:none}}

/* 분석 세 칸: 맨 위에서부터 채우고, 가득 차면 위쪽 줄이 밀려 올라간다 */
.sc2-out .sc2-log{justify-content:flex-start;-webkit-mask-image:none;mask-image:none}

/* 상단 메뉴로 이동할 때 고정 헤더에 가려지지 않게 */
section[id],div[id=how]{scroll-margin-top:72px}

/* ===== 상단 메뉴 드롭다운 (서비스, 고객지원) ===== */
.nav-dd{position:relative}
.nav-dd>button{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:inherit;cursor:pointer}
.nav-dd>button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .2s}
.nav-dd:hover>button svg,.nav-dd.open>button svg{transform:rotate(180deg)}
.nav-menu{position:absolute;top:100%;left:50%;display:none;min-width:168px;margin-top:14px;padding:8px;border:1px solid var(--g2);border-radius:12px;background:#fff;box-shadow:0 14px 36px rgba(30,15,60,.16);transform:translateX(-50%);z-index:60}
.nav-menu:before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-dd:hover .nav-menu,.nav-dd.open .nav-menu{display:block;animation:nav-in .18s ease-out}
.nav-menu a{display:block;padding:10px 14px;border-radius:8px;color:var(--g5);font-size:14px;font-weight:700;white-space:nowrap}
.nav-menu a:hover,.nav-menu a:focus-visible{background:var(--pl);color:var(--p);outline:0}
.nav-dd>button:focus-visible{outline:2px solid var(--p);outline-offset:4px;border-radius:4px}
html[data-theme="dark"] .nav-menu{background:#181226;border-color:var(--g3);box-shadow:0 14px 36px rgba(0,0,0,.5)}
html[data-theme="dark"] .nav-menu a:hover,html[data-theme="dark"] .nav-menu a:focus-visible{color:#d9c8ff}
@keyframes nav-in{from{opacity:0;transform:translateX(-50%) translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.nav-dd:hover .nav-menu,.nav-dd.open .nav-menu{animation:none}}

/* ===== FEATURES: 입체감 있는 아이콘 (정지 SVG + CSS 그라데이션, 실시간 3D 아님) ===== */
html[data-theme] .features .feature-card .icon{width:64px;height:64px;border-radius:19px;background:linear-gradient(145deg,#b79cff 0%,#8b5cf6 38%,#6a2fc0 72%,#4b1d92 100%);color:#fff;box-shadow:0 14px 22px -6px rgba(94,40,170,.55),0 3px 0 #3f1880,inset 0 2px 0 rgba(255,255,255,.55),inset 0 -6px 10px rgba(35,8,80,.38),inset 4px 0 8px rgba(255,255,255,.12);position:relative;transform:perspective(420px) rotateX(0) rotateY(0);transition:transform .35s cubic-bezier(.16,.84,.44,1),box-shadow .35s}
html[data-theme] .features .feature-card .icon:before{content:"";position:absolute;left:8px;right:16px;top:5px;height:20px;border-radius:14px 14px 40px 40px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
html[data-theme] .features .feature-card .icon svg{position:relative;width:30px;fill:rgba(255,255,255,.28);stroke:#fff;stroke-width:2.2;filter:drop-shadow(0 3px 2px rgba(35,8,80,.45))}
html[data-theme] .features .feature-card:hover .icon{transform:perspective(420px) rotateX(10deg) rotateY(-12deg) translateY(-4px);box-shadow:0 20px 26px -8px rgba(94,40,170,.6),0 3px 0 #3f1880,inset 0 2px 0 rgba(255,255,255,.55),inset 0 -6px 10px rgba(35,8,80,.38)}
@media(prefers-reduced-motion:reduce){html[data-theme] .features .feature-card .icon{transition:none}html[data-theme] .features .feature-card:hover .icon{transform:none}}

/* ===== FEATURES: 아이콘 자체를 입체 오브젝트로 (지구본, 쇼핑백, 종이비행기, 선물상자, 플러그, 톱니) ===== */
html[data-theme] .features .feature-card .icon{width:76px;height:76px;border-radius:0;background:none;box-shadow:none;transform:none;transition:transform .35s cubic-bezier(.16,.84,.44,1)}
html[data-theme] .features .feature-card .icon:before{display:none}
html[data-theme] .features .feature-card .icon svg{width:76px;height:76px;fill:none;stroke:none;filter:drop-shadow(0 6px 6px rgba(75,29,146,.22))}
html[data-theme] .features .feature-card:hover .icon{transform:translateY(-5px) rotate(-4deg) scale(1.05);box-shadow:none}
html[data-theme="dark"] .features .feature-card .icon svg{filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
@media(prefers-reduced-motion:reduce){html[data-theme] .features .feature-card:hover .icon{transform:none}}

/* ===== FEATURES 아이콘: 두 톤(듀오톤) 라인 아이콘. 그라데이션과 그림자 없이 단정하게 ===== */
.features{--ic-ink:#1E1E1E;--ic-pale:#d9c8ff;--ic-acc:#7634CB;--ic-tile:#f4effc}
html[data-theme="dark"] .features{--ic-ink:#f2eff8;--ic-pale:rgba(167,139,250,.38);--ic-acc:#b79cff;--ic-tile:#241a3d}
html[data-theme] .features .feature-card .icon{width:68px;height:68px;border-radius:20px;background:var(--ic-tile);box-shadow:none;transform:none;display:grid;place-items:center;transition:background .25s,transform .25s}
html[data-theme] .features .feature-card .icon svg{width:44px;height:44px;filter:none;fill:none;stroke:none}
.features .icon svg .p{fill:var(--ic-pale);stroke:none}
.features .icon svg .a{fill:var(--ic-acc);stroke:none}
.features .icon svg .k{fill:none;stroke:var(--ic-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.features .icon svg .t path{stroke-width:5}
.features .icon svg .ac{fill:none;stroke:var(--ic-acc);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
html[data-theme] .features .feature-card:hover .icon{transform:translateY(-3px);background:var(--pl);box-shadow:none}
@media(prefers-reduced-motion:reduce){html[data-theme] .features .feature-card:hover .icon{transform:none}}

/* PARTNER: 두 영역을 라벨과 간격으로 구분, 다크 모드 칩은 눈부시지 않게 */
.partner-marquee{gap:12px}
.partner-cap{margin:0 auto;width:min(1120px,calc(100% - 44px));color:var(--g4);font-size:13px;font-weight:800;letter-spacing:.02em}
.partner-track+.partner-cap{margin-top:44px}
html[data-theme="dark"] .partner-chip{background:#e4def2;border-color:transparent}
html[data-theme="dark"] .partner-chip img{mix-blend-mode:multiply}
html[data-theme="dark"] .partner-cap{color:#a99bc4}

/* PARTNER: 두 줄 사이 여백만 넓힌다 (라벨 없음) */
.partner-marquee{gap:48px}
.partner-cap{display:none}
@media(max-width:560px){.partner-marquee{gap:28px}}

/* ===== 타이포그래피/색 통일 (제목, 강조색, 설명, 카드 글씨) ===== */
html[data-theme]{--t-em:#7634CB}
html[data-theme="dark"]{--t-em:#b79cff}
/* 섹션 제목 */
html[data-theme] .section-head h2,html[data-theme] .try-sec h2,html[data-theme] .closing h2,html[data-theme] .intro h2{font-size:clamp(30px,3.6vw,44px);font-weight:800;letter-spacing:-.04em;line-height:1.28}
/* 강조색은 위쪽(히어로)과 같게: 라이트는 진한 보라, 다크는 밝은 라벤더 */
html[data-theme] .section-head h2 em,html[data-theme] .try-sec .acc,html[data-theme] .closing h2 em,html[data-theme] .intro h2 em,html[data-theme] .pr2 h2 em,html[data-theme] .impact .section-head h2 em,html[data-theme] .features h2 em,html[data-theme] .partners h2 em,html[data-theme] .uses h2 em,html[data-theme] .benefits h2 em{color:var(--t-em)}
html[data-theme] .kicker{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--t-em)}
/* 섹션 설명 */
html[data-theme] .section-head>p:last-child,html[data-theme] .try-sec .sc2-lead{font-size:17px;line-height:1.75;color:var(--g5)}
/* 카드 제목과 설명 */
html[data-theme] .feature-card h3,html[data-theme] .usecase-card h3,html[data-theme] .benefit-card h3{font-size:20px;font-weight:800;letter-spacing:-.03em;line-height:1.4}
html[data-theme] .imp-card h3{font-size:26px;font-weight:800;letter-spacing:-.03em}
html[data-theme] .feature-card p,html[data-theme] .usecase-card p,html[data-theme] .benefit-card p{font-size:14.5px;line-height:1.7;color:var(--g5)}
html[data-theme] .imp-card p{font-size:15.5px;line-height:1.75;color:var(--g5)}
html[data-theme] summary{font-size:17px;font-weight:800}
html[data-theme] details p{font-size:15px;line-height:1.75;color:var(--g5)}
html[data-theme] .pr-steps b{font-size:16px;font-weight:800}
html[data-theme="dark"] .imp-card p{color:var(--g5)}

/* 라이트 모드 보정 파일(c-light.css)보다 우선: 이점 섹션도 같은 강조색/설명색 사용 */
html[data-theme] .impact .kicker,html[data-theme] .impact .section-head h2 em{color:var(--t-em)!important}
html[data-theme] .impact .section-head>p:last-child{color:var(--g5)!important}
html[data-theme="light"] .impact .section-head h2{color:var(--ink)!important}

/* ===== FEATURES: 제공받은 3D 아이콘 이미지 (01~06, 투명 PNG) ===== */
html[data-theme] .features .feature-card .icon{width:auto;height:auto;border-radius:0;background:none;box-shadow:none;display:block;transform:none;margin:-6px 0 -2px -16px;transition:transform .35s cubic-bezier(.16,.84,.44,1)}
html[data-theme] .features .feature-card .icon img{display:block;width:132px;height:auto;aspect-ratio:512/420;object-fit:contain}
html[data-theme] .features .feature-card:hover .icon{background:none;transform:translateY(-4px) scale(1.03)}
@media(prefers-reduced-motion:reduce){html[data-theme] .features .feature-card:hover .icon{transform:none}}
@media(max-width:560px){html[data-theme] .features .feature-card .icon img{width:112px}}

/* 아이콘 이미지: 왼쪽 정렬, 크게 */
html[data-theme] .features .feature-card .icon{display:block;width:fit-content;margin:-8px 0 0 -22px}
html[data-theme] .features .feature-card .icon img{margin:0;width:164px}
@media(max-width:560px){html[data-theme] .features .feature-card .icon img{width:132px}}

/* ===== 노출 확대: 상품권 1건이 여러 판매 채널에 연결되며 노출이 늘어난다 ===== */
.imp-h{position:relative;overflow:hidden}
.imp-h .hl{position:absolute;inset:0;width:100%;height:100%}
.imp-h .hl path{fill:none;stroke:#a78bfa;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;opacity:.9;animation:ih-line 8s cubic-bezier(.16,.84,.44,1) infinite;animation-delay:var(--d)}
.imp-h .hv{position:absolute;z-index:3;left:50%;top:50%;width:132px;height:84px;margin:-42px 0 0 -66px;padding:12px 14px;border-radius:12px;background:linear-gradient(135deg,#8b5cf6,#5b21b6 65%,#461F79);color:#fff;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 12px 28px rgba(70,31,121,.4);animation:ih-pulse 8s ease-in-out infinite}
.imp-h .hv b{font-size:15px;font-weight:800;letter-spacing:-.02em}
.imp-h .hv span{font-size:11.5px;font-weight:700;opacity:.9}
.imp-h .hc{position:absolute;z-index:2;width:112px;height:50px;border-radius:11px;background:#fff;border:1px solid rgba(40,30,70,.14);display:grid;place-items:center;color:#5c24a5;font-size:14px;font-weight:800;box-shadow:0 6px 16px rgba(40,30,70,.12);opacity:.35;transform:scale(.92);animation:ih-chan 8s cubic-bezier(.16,.84,.44,1) infinite;animation-delay:var(--d)}
.imp-h .hc img{max-width:66px;max-height:24px}
.imp-h .hc i{position:absolute;top:-11px;right:-8px;padding:3px 9px;border-radius:999px;background:#7634CB;color:#fff;font-size:11px;font-style:normal;font-weight:800;opacity:0;transform:translateY(6px);animation:ih-badge 8s cubic-bezier(.16,.84,.44,1) infinite;animation-delay:var(--d)}
.imp-h .c1{left:6%;top:12%}.imp-h .c2{right:6%;top:12%}.imp-h .c3{left:6%;bottom:12%}.imp-h .c4{right:6%;bottom:12%}
.imp-h .hcap{position:absolute;z-index:3;left:50%;bottom:10px;margin:0;transform:translateX(-50%);padding:6px 16px;border-radius:999px;background:#7634CB;color:#fff;font-size:12.5px;font-weight:800;white-space:nowrap;opacity:0;animation:ih-cap 8s ease infinite;animation-delay:5.2s}
@keyframes ih-line{0%{stroke-dashoffset:1}10%,86%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ih-chan{0%{opacity:.35;transform:scale(.92)}8%,86%{opacity:1;transform:scale(1)}94%,100%{opacity:.35;transform:scale(.92)}}
@keyframes ih-badge{0%{opacity:0;transform:translateY(6px)}8%,28%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes ih-pulse{0%,100%{transform:scale(1)}6%{transform:scale(1.05)}12%{transform:scale(1)}}
@keyframes ih-cap{0%{opacity:0;transform:translateX(-50%) translateY(8px)}6%,40%{opacity:1;transform:translateX(-50%)}50%,100%{opacity:0;transform:translateX(-50%) translateY(8px)}}
html[data-theme="dark"] .imp-h .hc{background:#e4def2;border-color:transparent}
html[data-theme="dark"] .imp-h .hl path{stroke:#b79cff}
@media(prefers-reduced-motion:reduce){.imp-h .hl path,.imp-h .hv,.imp-h .hc,.imp-h .hc i,.imp-h .hcap{animation:none}.imp-h .hl path{stroke-dashoffset:0}.imp-h .hc{opacity:1;transform:none}.imp-h .hc i{opacity:1;transform:none}.imp-h .hcap{opacity:1}}
@media(max-width:560px){.imp-h .hc{width:92px;height:44px}.imp-h .hv{width:112px;height:76px;margin:-38px 0 0 -56px}.imp-h .hcap{font-size:11.5px}}

.imp-h .c1,.imp-h .c2{top:10%}.imp-h .c3,.imp-h .c4{bottom:17%}
.imp-h .hcap{bottom:9px}

/* ===== 노출 확대 v2: 온라인 판매채널 확대 + 선물하기(업셀, 크로스셀) 흐름 ===== */
.imp-g{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:16px 18px;overflow:hidden}
.imp-g .ig-row small{display:block;margin-bottom:8px;color:var(--g4);font-size:12px;font-weight:800;letter-spacing:.02em}
.imp-g .ig-row>div{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.imp-g .ig-ch span{display:grid;place-items:center;min-width:86px;height:38px;padding:0 12px;border-radius:10px;background:#fff;border:1px solid rgba(40,30,70,.14);color:#5c24a5;font-size:13px;font-weight:800;box-shadow:0 4px 12px rgba(40,30,70,.08);opacity:0;transform:translateY(8px) scale(.94);animation:ig-in 9s cubic-bezier(.16,.84,.44,1) infinite;animation-delay:var(--d)}
.imp-g .ig-ch img{max-width:58px;max-height:20px}
.imp-g .ig-gift em{font-style:normal;opacity:0;transform:translateY(8px);animation:ig-in 9s cubic-bezier(.16,.84,.44,1) infinite;animation-delay:var(--d)}
.imp-g .who{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 7px;border-radius:999px;background:rgba(118,52,203,.1);color:var(--ink);font-size:12.5px;font-weight:800}
.imp-g .who .pp{position:relative;display:block;width:26px;height:26px;border-radius:50%;background:#7634CB;overflow:hidden}
.imp-g .who .pp i{position:absolute;left:8px;top:5px;width:10px;height:10px;border-radius:50%;background:#efe9ff}
.imp-g .who .pp:after{content:"";position:absolute;left:4px;top:16px;width:18px;height:14px;border-radius:50%;background:#efe9ff}
.imp-g .who.f{background:#7634CB;color:#fff}
.imp-g .who.f .pp{background:#efe9ff}.imp-g .who.f .pp i,.imp-g .who.f .pp:after{background:#7634CB}
.imp-g .who u{margin-left:2px;padding:1px 7px;border-radius:999px;background:#fff;color:#5c24a5;font-size:11px;font-weight:800;text-decoration:none}
.imp-g .vc{padding:8px 14px;border-radius:9px;background:linear-gradient(135deg,#8b5cf6,#5b21b6);color:#fff;font-size:12.5px;font-weight:800;box-shadow:0 6px 14px rgba(70,31,121,.35)}
.imp-g .arr{width:34px;height:2px;border-radius:1px;background:#a78bfa;position:relative}
.imp-g .arr:after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid #a78bfa;border-right:0}
.imp-g .ig-up span{padding:8px 14px;border-radius:999px;border:1px dashed #a78bfa;color:var(--ink);font-size:12.5px;font-weight:700;opacity:0;transform:translateY(8px);animation:ig-in 9s cubic-bezier(.16,.84,.44,1) infinite;animation-delay:var(--d)}
.imp-g .ig-up b{margin-right:4px;color:#7634CB;font-weight:800}
@keyframes ig-in{0%{opacity:0;transform:translateY(8px) scale(.94)}6%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-4px)}}
html[data-theme="dark"] .imp-g .ig-ch span{background:#e4def2;border-color:transparent}
html[data-theme="dark"] .imp-g .who:not(.f){background:rgba(167,139,250,.22);color:var(--ink)}
html[data-theme="dark"] .imp-g .ig-up b{color:#b79cff}
@media(prefers-reduced-motion:reduce){.imp-g .ig-ch span,.imp-g .ig-gift em,.imp-g .ig-up span{animation:none;opacity:1;transform:none}}
@media(max-width:560px){.imp-g{gap:10px;padding:12px}.imp-g .ig-ch span{min-width:70px;height:34px;font-size:12px}.imp-g .ig-gift>div{gap:6px}.imp-g .arr{width:18px}.imp-g .who{font-size:11.5px;padding:5px 9px 5px 5px}.imp-g .who b{display:none}.imp-g .who:first-child b{display:inline}}

/* 카드가 다시 보일 때 애니메이션 재시작 */
.imp-vis.rs,.imp-vis.rs *{animation:none!important}
/* 노출 확대 타임라인을 슬라이드 시간(7초) 안에 끝나게 */

/* ===== 노출 확대 v3: 한 줄 흐름 (채널 확대 > 선물하기 > 신규 고객 > 업셀·크로스셀) ===== */
.imp-f{display:grid;align-content:center;padding:0 22px}
.imp-f ol{position:relative;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.imp-f ol:before,.imp-f ol:after{content:"";position:absolute;left:12.5%;right:12.5%;top:17px;height:3px;border-radius:2px}
.imp-f ol:before{background:rgba(118,52,203,.16)}
.imp-f ol:after{background:#7634CB;transform-origin:left;animation:if-line 9s cubic-bezier(.4,0,.2,1) infinite;animation-delay:.6s}
.imp-f li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.imp-f em{width:36px;height:36px;border-radius:50%;border:3px solid #a78bfa;background:#fff;animation:if-dot 9s infinite;animation-delay:var(--d)}
.imp-f b{color:var(--ink);font-size:14px;font-weight:800;line-height:1.35;letter-spacing:-.02em;opacity:.45;animation:if-txt 9s infinite;animation-delay:var(--d)}
.imp-f li>span{color:var(--g5);font-size:12.5px;font-weight:600;line-height:1.4;opacity:0;transform:translateY(6px);animation:if-sub 9s cubic-bezier(.16,.84,.44,1) infinite;animation-delay:var(--d)}
.imp-f .lg{display:flex;gap:4px}
.imp-f .lg img{width:30px;height:20px;padding:2px 3px;border-radius:5px;background:#fff;border:1px solid rgba(40,30,70,.12);object-fit:contain}
.imp-f li.last b{color:#7634CB}
@keyframes if-line{0%{transform:scaleX(0)}48%,88%{transform:scaleX(1)}96%,100%{transform:scaleX(1);opacity:0}}
@keyframes if-dot{0%{background:#fff;border-color:#a78bfa;transform:scale(.8)}5%,86%{background:#7634CB;border-color:#7634CB;transform:scale(1)}94%,100%{background:#fff;border-color:#a78bfa;transform:scale(.8)}}
@keyframes if-txt{0%{opacity:.45}5%,86%{opacity:1}94%,100%{opacity:.45}}
@keyframes if-sub{0%{opacity:0;transform:translateY(6px)}7%,86%{opacity:1;transform:none}94%,100%{opacity:0}}
html[data-theme="dark"] .imp-f em{background:#241a3d}
html[data-theme="dark"] .imp-f li.last b{color:#b79cff}
html[data-theme="dark"] .imp-f ol:before{background:rgba(167,139,250,.2)}
@media(prefers-reduced-motion:reduce){.imp-f ol:after,.imp-f em,.imp-f b,.imp-f li>span{animation:none}.imp-f em{background:#7634CB;border-color:#7634CB}.imp-f b,.imp-f li>span{opacity:1;transform:none}}
@media(max-width:560px){
  .imp-f{padding:0 14px}.imp-f ol{grid-template-columns:1fr;gap:16px}
  .imp-f ol:before,.imp-f ol:after{left:17px;right:auto;top:18px;bottom:36px;width:3px;height:auto}
  .imp-f ol:after{transform-origin:top;animation-name:if-line-v}
  .imp-f li{flex-direction:row;align-items:center;gap:12px;text-align:left;flex-wrap:wrap}
  .imp-f li>span{flex-basis:100%;margin-left:48px;margin-top:-8px}
}
@keyframes if-line-v{0%{transform:scaleY(0)}48%,88%{transform:scaleY(1)}96%,100%{transform:scaleY(1);opacity:0}}

/* ===== 노출 확대 v4: 상품 등록 > 채널 구매 > 사용 > 선물 > 지인 방문 > 초과 사용(추가 결제) 이야기 ===== */
.imp-s{display:grid;grid-template-columns:200px 1fr;align-items:center;gap:22px;padding:0 24px}
.imp-s .sv{display:grid;gap:12px;justify-items:start}
.imp-s .vc{position:relative;width:200px;height:122px;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,#8b5cf6,#5b21b6 65%,#461F79);color:#fff;display:flex;flex-direction:column;box-shadow:0 14px 30px rgba(70,31,121,.38);animation:is-vc 9s ease-in-out infinite}
.imp-s .vc b{font-size:15px;font-weight:800}
.imp-s .vc span{margin-top:auto;font-size:12px;font-weight:700;opacity:.9}
.imp-s .vc strong{font-size:19px;font-weight:800;letter-spacing:-.02em}
.imp-s .stw{position:absolute;right:12px;top:12px;height:22px;min-width:76px}
.imp-s .st{position:absolute;right:0;top:0;padding:4px 10px;border-radius:999px;background:#fff;color:#5c24a5;font-size:11px;font-style:normal;font-weight:800;white-space:nowrap;opacity:0;animation:is-st 9s infinite;animation-delay:var(--d)}
.imp-s .st.last{background:#ffd9a8;color:#7a3a00;animation-name:is-st-last}
.imp-s .am{position:relative;display:flex;align-items:center;width:200px}
.imp-s .am .tr{width:100%;height:10px;border-radius:5px;background:rgba(118,52,203,.18);overflow:hidden}
.imp-s .am .tr i{display:block;width:100%;height:100%;background:#7634CB;transform-origin:left;transform:scaleX(0);animation:is-fill 9s cubic-bezier(.4,0,.2,1) infinite;animation-delay:4.3s}
.imp-s .am u{position:absolute;left:100%;margin-left:-70px;top:-26px;padding:3px 9px;border-radius:999px;background:#ff8a3d;color:#fff;font-size:11px;font-weight:800;text-decoration:none;opacity:0;animation:is-over 9s infinite;animation-delay:5.3s}
.imp-s .sf{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.imp-s .sf li{padding:9px 14px;border-radius:10px;background:rgba(118,52,203,.09);color:var(--ink);font-size:13px;font-weight:700;line-height:1.3;opacity:0;transform:translateX(14px);animation:is-li 9s cubic-bezier(.16,.84,.44,1) infinite;animation-delay:var(--d)}
.imp-s .sf li.hl{background:#7634CB;color:#fff}
@keyframes is-li{0%{opacity:0;transform:translateX(14px)}5%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateX(-6px)}}
@keyframes is-st{0%{opacity:0;transform:translateY(4px)}2%,10%{opacity:1;transform:none}12%,100%{opacity:0}}
@keyframes is-st-last{0%{opacity:0;transform:translateY(4px)}2%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes is-fill{0%{transform:scaleX(0)}12%,88%{transform:scaleX(1)}96%,100%{transform:scaleX(1);opacity:0}}
@keyframes is-over{0%{opacity:0;transform:translateY(6px)}4%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes is-vc{0%,58%,100%{transform:none}62%{transform:scale(1.03) rotate(-1deg)}66%{transform:none}}
html[data-theme="dark"] .imp-s .sf li{background:rgba(167,139,250,.16);color:var(--ink)}
html[data-theme="dark"] .imp-s .sf li.hl{background:#7634CB;color:#fff}
html[data-theme="dark"] .imp-s .am .tr{background:rgba(167,139,250,.22)}
@media(prefers-reduced-motion:reduce){.imp-s .vc,.imp-s .st,.imp-s .am .tr i,.imp-s .am u,.imp-s .sf li{animation:none}.imp-s .st{opacity:0}.imp-s .st.last{opacity:1}.imp-s .am .tr i{transform:none}.imp-s .am u{opacity:1}.imp-s .sf li{opacity:1;transform:none}}
@media(max-width:700px){.imp-s{grid-template-columns:1fr;gap:12px;padding:12px 16px;align-content:center}.imp-s .vc{width:180px;height:96px}.imp-s .am{width:180px}.imp-s .sv{grid-auto-flow:column;align-items:center;justify-content:start;gap:16px}.imp-s .sf li{padding:6px 10px;font-size:12px}.imp-s .sf{gap:4px}}
@media(max-width:560px){.imp-s .vc strong{font-size:16px}.imp-s .sv{display:grid;justify-items:start}}

/* ===== 리스크 감소 v2: 비용 미터 (단계가 지나가도 0원, 사용 시점에만 정산) ===== */
.imp-r{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 24px;text-align:center}
.imp-r small{color:var(--g4);font-size:13px;font-weight:800;letter-spacing:.02em}
.imp-r .rn{position:relative;width:100%;height:84px}
.imp-r .rn span{position:absolute;left:0;right:0;top:0;bottom:0;display:grid;place-items:center;font-weight:800;letter-spacing:-.04em;line-height:1}
.imp-r .z{color:#7634CB;font-size:76px;animation:ir-z 9s ease infinite}
.imp-r .z em{margin-left:4px;font-size:34px;font-style:normal;letter-spacing:0}
.imp-r .p{color:#7634CB;font-size:32px;opacity:0;transform:translateY(10px);animation:ir-p 9s cubic-bezier(.16,.84,.44,1) infinite}
.imp-r .rw{position:relative;width:min(300px,100%);height:44px;margin-top:6px;border-radius:12px;border:1px solid rgba(40,30,70,.14);background:#fff;display:flex;align-items:center;overflow:hidden}
.imp-r .rl{flex:1;height:44px;overflow:hidden}
.imp-r .rl{display:block}
.imp-r .rl b{display:block;height:44px;line-height:44px;padding-left:16px;text-align:left;color:#1E1E1E;font-size:14px;font-weight:800}
.imp-r .rl{position:relative}
.imp-r .rl:before{content:"";position:absolute}
.imp-r .rl>b:first-child{animation:ir-roll 9s cubic-bezier(.6,0,.2,1) infinite}
.imp-r .rc{position:absolute;right:8px;top:8px;height:28px;padding:0 12px;border-radius:999px;background:#e3d8ff;color:#5c24a5;font-size:12px;font-style:normal;font-weight:800;line-height:28px;animation:ir-rc 9s ease infinite}
.imp-r .rc.ps{background:#ff8a3d;color:#fff;opacity:0;animation-name:ir-ps}
@keyframes ir-roll{0%,16%{margin-top:0}20%,34%{margin-top:-44px}38%,52%{margin-top:-88px}56%,88%{margin-top:-132px}96%,100%{margin-top:0}}
@keyframes ir-z{0%,52%{opacity:1;transform:none}58%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes ir-p{0%,54%{opacity:0;transform:translateY(10px)}60%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes ir-rc{0%,52%{opacity:1}56%,100%{opacity:0}}
@keyframes ir-ps{0%,54%{opacity:0;transform:scale(.8)}60%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
html[data-theme="dark"] .imp-r .z,html[data-theme="dark"] .imp-r .p{color:#b79cff}
html[data-theme="dark"] .imp-r .rw{background:#241a3d;border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .imp-r .rl b{color:#f2eff8}
html[data-theme="dark"] .imp-r .rc{background:rgba(167,139,250,.28);color:#e6d9ff}
html[data-theme="dark"] .imp-r .rc.ps{background:#ff8a3d;color:#fff}
@media(prefers-reduced-motion:reduce){.imp-r .z,.imp-r .p,.imp-r .rc,.imp-r .rl>b:first-child{animation:none}.imp-r .p{opacity:0}.imp-r .rc.ps{opacity:0}}
@media(max-width:560px){.imp-r .z{font-size:60px}.imp-r .p{font-size:25px}.imp-r .rn{height:70px}}
.imp-r .rn span{display:flex;justify-content:center;align-items:center}
.imp-r .z{align-items:baseline}
.imp-r .z em{align-self:flex-end;margin-bottom:10px}

/* 리스크 감소: 더 빠르게 (4초에 끝나고 마지막 장면을 유지, 카드가 다시 보이면 처음부터) */
.imp-r .z{animation:ir2-z 4s ease both}
.imp-r .p{animation:ir2-p 4s cubic-bezier(.16,.84,.44,1) both}
.imp-r .rc{animation:ir2-rc 4s ease both}
.imp-r .rc.ps{animation-name:ir2-ps}
.imp-r .rl>b:first-child{animation:ir2-roll 4s cubic-bezier(.6,0,.2,1) both}
@keyframes ir2-roll{0%,8%{margin-top:0}16%,32%{margin-top:-44px}40%,56%{margin-top:-88px}64%,100%{margin-top:-132px}}
@keyframes ir2-z{0%,60%{opacity:1;transform:none}68%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes ir2-p{0%,62%{opacity:0;transform:translateY(10px)}72%,100%{opacity:1;transform:none}}
@keyframes ir2-rc{0%,62%{opacity:1}66%,100%{opacity:0}}
@keyframes ir2-ps{0%,62%{opacity:0;transform:scale(.8)}72%,100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.imp-r .z,.imp-r .p,.imp-r .rc,.imp-r .rl>b:first-child{animation:none}}

/* ===== 노출 확대 v5: 스케치 기반 4장면 (등록 > 구매·사용 > 선물 > 추가 결제), 약 7초 ===== */
.imp-x{position:relative;overflow:hidden}
.imp-x .xw{position:absolute;left:50%;top:50%;width:520px;height:250px;margin:-125px 0 0 -260px}
.imp-x .xs{position:absolute;inset:0 0 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;transform:translateY(10px);animation-duration:7s;animation-fill-mode:both;animation-timing-function:cubic-bezier(.16,.84,.44,1)}
.imp-x .xs1{animation-name:xs1}.imp-x .xs2{animation-name:xs2}.imp-x .xs3{animation-name:xs3}.imp-x .xs4{animation-name:xs4}
.imp-x .xc{margin:0;color:var(--ink);font-size:15px;font-weight:800;letter-spacing:-.02em}
.imp-x .xr{display:flex;align-items:center;justify-content:center;gap:16px}
.imp-x .xo{display:flex;flex-direction:column;align-items:center;gap:8px}
.imp-x .xa{color:#a78bfa;font-size:24px;font-weight:700;animation:xnudge 1.1s ease-in-out infinite}
.imp-x .xg{padding:5px 11px;border-radius:999px;background:#fff;border:1px solid rgba(40,30,70,.14);color:#5c24a5;font-size:11.5px;font-weight:800;white-space:nowrap}
.imp-x .xv{width:96px;height:62px;border-radius:10px;background:linear-gradient(135deg,#a576ff,#7634CB 65%,#5126b4);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;box-shadow:0 8px 16px rgba(118,52,203,.3);border:1px solid rgba(255,255,255,.4)}
.imp-x .xv b{font-size:11px;font-weight:800;letter-spacing:.02em}
.imp-x .xb{position:relative;width:132px;height:112px;padding:8px 10px;border-radius:12px;background:var(--card,#fff);border:1px solid rgba(40,30,70,.14);border-top:14px solid #e6defa;display:flex;flex-direction:column;align-items:center;gap:6px}
.imp-x .xb small,.imp-x .xp small{color:var(--g4);font-size:10px;font-weight:700}
.imp-x .xb .xv{transform:scale(.8);margin-top:-2px}
.imp-x .xu{position:absolute;right:-12px;bottom:-12px;width:34px;height:34px;border-radius:10px;background:#7634CB;color:#fff;font-style:normal;font-size:20px;font-weight:800;display:grid;place-items:center;box-shadow:0 6px 12px rgba(118,52,203,.35);animation:xpop 1.4s ease-in-out infinite}
.imp-x .xch{gap:7px}
.imp-x .xch span{display:grid;place-items:center;width:118px;height:30px;border-radius:9px;background:#fff;border:1px solid rgba(40,30,70,.14);color:#5c24a5;font-size:12px;font-weight:800}
.imp-x .xch img{max-width:62px;max-height:18px}
.imp-x .xch span.pg{background:#efe7ff}
.imp-x .xp{width:104px;height:150px;padding:20px 8px 10px;border-radius:20px;background:var(--card,#fff);border:5px solid #3b3252;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative}
.imp-x .xp:before{content:"";position:absolute;top:6px;left:50%;width:32px;height:5px;margin-left:-16px;border-radius:4px;background:#3b3252}
.imp-x .xp .xv{transform:scale(.88)}
.imp-x .xp em{padding:3px 9px;border-radius:999px;background:#efe7ff;color:#5c24a5;font-size:10.5px;font-style:normal;font-weight:800}
.imp-x .xst{position:relative;width:142px;height:112px;margin-top:6px;border-radius:12px;background:var(--card,#fff);border:1px solid rgba(40,30,70,.14)}
.imp-x .xst .aw{position:absolute;left:-6px;right:-6px;top:0;height:34px;border-radius:6px 6px 12px 12px;background:repeating-linear-gradient(90deg,#8050e5 0 24px,#eee8fb 24px 48px)}
.imp-x .xst .dr{position:absolute;left:22px;bottom:0;width:34px;height:64px;border-radius:6px 6px 0 0;background:#e9defa;border:2px solid #b49bdc}
.imp-x .xst .wd{position:absolute;right:20px;bottom:18px;width:56px;height:38px;border-radius:6px;background:#f6f1fe;border:2px solid #cfbce9}
.imp-x .xpe{position:relative;width:48px;height:58px}
.imp-x .xpe:before{content:"";display:block;width:22px;height:22px;margin:0 auto;border-radius:50%;background:#a98bdf}
.imp-x .xpe:after{content:"";position:absolute;left:5px;bottom:0;width:38px;height:28px;border-radius:20px 20px 8px 8px;background:#7b4bc7}
.imp-x .xpe.n:before{background:#c4b1e7}.imp-x .xpe.n:after{background:#9c7ccc}
.imp-x .xp.s{height:132px}
.imp-x .xrc{width:196px;padding:14px 16px;border-radius:12px;background:var(--card,#fff);border:1px solid rgba(40,30,70,.14);box-shadow:0 10px 24px rgba(65,42,112,.1)}
.imp-x .xrc h4{margin:0 0 10px;color:var(--ink);font-size:13px;font-weight:800}
.imp-x .xrc div{display:flex;justify-content:space-between;margin-top:8px;color:var(--g4);font-size:12px;font-weight:600}
.imp-x .xrc .ex{color:#7634CB;font-weight:800;animation:xpop 1.4s ease-in-out infinite}
.imp-x .xrc .tt{margin-top:12px;padding-top:10px;border-top:1px dashed rgba(40,30,70,.2);align-items:center}
.imp-x .xrc .tt strong{color:#7634CB;font-size:20px;font-weight:800}
.imp-x .xbars{position:absolute;left:60px;right:60px;bottom:0;display:flex;gap:6px}
.imp-x .xbars i{flex:1;height:3px;border-radius:2px;background:rgba(118,52,203,.18);position:relative;overflow:hidden}
.imp-x .xbars i:after{content:"";position:absolute;inset:0;background:#7634CB;transform:scaleX(0);transform-origin:left;animation:xbar 7s linear both}
.imp-x .xbars i:nth-child(2):after{animation-delay:1.6s}.imp-x .xbars i:nth-child(3):after{animation-delay:3.2s}.imp-x .xbars i:nth-child(4):after{animation-delay:4.8s}
@keyframes xbar{0%{transform:scaleX(0)}23%,100%{transform:scaleX(1)}}
@keyframes xnudge{50%{transform:translateX(5px)}}
@keyframes xpop{50%{transform:scale(1.07)}}
@keyframes xs1{0%,20%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes xs2{0%,20%{opacity:0;transform:translateY(10px)}25%,43%{opacity:1;transform:none}48%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes xs3{0%,43%{opacity:0;transform:translateY(10px)}48%,66%{opacity:1;transform:none}71%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes xs4{0%,66%{opacity:0;transform:translateY(10px)}71%,100%{opacity:1;transform:none}}
html[data-theme="dark"] .imp-x .xg,html[data-theme="dark"] .imp-x .xch span{background:#e4def2;border-color:transparent}
html[data-theme="dark"] .imp-x .xb{border-color:rgba(255,255,255,.14);border-top-color:#4a3c78}
html[data-theme="dark"] .imp-x .xp{border-color:#6b5c96}
html[data-theme="dark"] .imp-x .xp:before{background:#6b5c96}
html[data-theme="dark"] .imp-x .xst,html[data-theme="dark"] .imp-x .xrc{border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .imp-x .xrc .ex,html[data-theme="dark"] .imp-x .xrc .tt strong{color:#b79cff}
@media(prefers-reduced-motion:reduce){.imp-x .xs,.imp-x .xa,.imp-x .xu,.imp-x .xrc .ex,.imp-x .xbars i:after{animation:none}.imp-x .xs{opacity:0}.imp-x .xs4{opacity:1;transform:none}.imp-x .xbars i:after{transform:none}}
@media(max-width:700px){.imp-x .xw{transform:scale(.66)}}
@media(max-width:420px){.imp-x .xw{transform:scale(.56)}}

.imp-tabs.auto button.on:after{animation-duration:8s}

/* 노출 확대 v6: 3D 아이콘 이미지(assets/01~04)와 정돈된 카드로 마감 */
.imp-x .xr{gap:12px}
.imp-x .xi{display:block;width:150px;height:auto;aspect-ratio:512/420;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(94,40,170,.22))}
.imp-x .xi.s{width:132px}
.imp-x .xv{position:relative;width:104px;height:70px;padding:9px 11px;border-radius:12px;align-items:flex-start;justify-content:space-between;background:linear-gradient(135deg,#a576ff,#7634CB 62%,#4d22ad);box-shadow:0 14px 26px rgba(94,40,170,.32),inset 0 1px 0 rgba(255,255,255,.45);border:0}
.imp-x .xv:before,.imp-x .xv:after{content:"";position:absolute;top:36px;width:9px;height:9px;border-radius:50%;background:var(--vbg,#f6f1fd)}
.imp-x .xv:before{left:-5px}.imp-x .xv:after{right:-5px}
.imp-x .xv .xvh{font-size:11px;font-weight:800;letter-spacing:-.01em}
.imp-x .xv svg{position:absolute;right:10px;top:9px;opacity:.85}
.imp-x .xv small{font-size:9.5px;font-weight:600;opacity:.8}
.imp-x .xv b{font-size:15px;font-weight:800;letter-spacing:-.02em;margin-top:-3px}
.imp-x .xch{display:grid;gap:6px}
.imp-x .xch span{display:grid;place-items:center;width:104px;height:28px;border-radius:9px;background:var(--card,#fff);border:1px solid rgba(40,30,70,.1);box-shadow:0 4px 10px rgba(40,30,70,.06);color:#5c24a5;font-size:11.5px;font-weight:800}
.imp-x .xch img{max-width:58px;max-height:16px}
.imp-x .xch span.pg{background:#efe7ff}
.imp-x .xg{padding:6px 12px;border-radius:999px;background:var(--card,#fff);border:1px solid rgba(40,30,70,.1);box-shadow:0 4px 10px rgba(40,30,70,.06);color:#5c24a5;font-size:11.5px;font-weight:800}
.imp-x .xg.big{font-size:12.5px;padding:8px 14px}
.imp-x .xtk{width:176px;padding:14px 16px;border-radius:14px;background:var(--card,#fff);border:1px solid rgba(40,30,70,.1);box-shadow:0 14px 28px rgba(65,42,112,.12)}
.imp-x .xtt{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.imp-x .xtt b{font-size:14px;font-weight:800;color:var(--ink)}
.imp-x .xtt i{width:24px;height:24px;border-radius:50%;background:#7634CB;color:#fff;font-style:normal;font-size:13px;font-weight:800;display:grid;place-items:center;animation:xpop 1.4s ease-in-out infinite}
.imp-x .xtl{display:flex;justify-content:space-between;margin-top:8px;color:var(--g4);font-size:12px;font-weight:600}
.imp-x .xtl .ok{color:#7634CB;font-weight:800}
.imp-x .xnt{width:176px;padding:12px 14px;border-radius:16px;background:var(--card,#fff);border:1px solid rgba(40,30,70,.1);box-shadow:0 14px 28px rgba(65,42,112,.14);display:grid;gap:3px}
.imp-x .xnh{display:flex;justify-content:space-between;align-items:center}
.imp-x .xnh em{font-style:normal;color:#7634CB;font-size:11px;font-weight:800}
.imp-x .xnh u{text-decoration:none;color:var(--g4);font-size:10.5px}
.imp-x .xnt b{font-size:13.5px;font-weight:800;color:var(--ink)}
.imp-x .xnt span{color:var(--g4);font-size:12px;font-weight:600}
.imp-x .xrc{width:208px;padding:16px 18px;border-radius:16px;box-shadow:0 14px 28px rgba(65,42,112,.14)}
.imp-x .xrc .tt strong{font-size:22px}
.imp-x .xa{font-size:20px}
.imp-x{--vbg:#f6f1fd}
html[data-theme="dark"] .imp-x{--vbg:#241a3d}
html[data-theme="dark"] .imp-x .xi{filter:drop-shadow(0 12px 16px rgba(0,0,0,.45))}
html[data-theme="dark"] .imp-x .xg,html[data-theme="dark"] .imp-x .xch span{background:#2a2046;border-color:rgba(255,255,255,.12);color:#e6d9ff}
html[data-theme="dark"] .imp-x .xch span.pg{background:#3a2c66}
html[data-theme="dark"] .imp-x .xtk,html[data-theme="dark"] .imp-x .xnt{border-color:rgba(255,255,255,.12)}
@media(max-width:700px){.imp-x .xi{width:120px}}

/* 노출 확대: 카드 폭에 맞춰 장면을 줄여서 가장자리에서 잘리지 않게 (컨테이너 폭 기준) */
.imp-x{container-type:inline-size}
.imp-x .xw{transform:none}
@container (max-width:539px){.imp-x .xw{transform:scale(.94)}}
@container (max-width:499px){.imp-x .xw{transform:scale(.86)}}
@container (max-width:459px){.imp-x .xw{transform:scale(.78)}}
@container (max-width:419px){.imp-x .xw{transform:scale(.7)}}
@container (max-width:379px){.imp-x .xw{transform:scale(.64)}}
@container (max-width:339px){.imp-x .xw{transform:scale(.57)}}
@container (max-width:299px){.imp-x .xw{transform:scale(.5)}}

/* 활용 사례: 업체명을 크게, 방식은 작은 칩으로 */
.usecase-card small.uc-n{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:20px;font-size:0;letter-spacing:0;color:inherit}
.usecase-card small.uc-n b{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.usecase-card small.uc-n span{padding:3px 10px;border-radius:999px;background:var(--pl);color:var(--pd);font-size:12px;font-weight:800;letter-spacing:0}
html[data-theme="dark"] .usecase-card small.uc-n span{color:#e6d9ff}
.usecase-card .icon svg{width:26px}

.imp-x .xw{--s:1}
@media(max-width:700px){.imp-x .xw{transform:none}}
@container (max-width:539px){.imp-x .xw{transform:scale(.94)}}
@container (max-width:499px){.imp-x .xw{transform:scale(.86)}}
@container (max-width:459px){.imp-x .xw{transform:scale(.78)}}
@container (max-width:419px){.imp-x .xw{transform:scale(.7)}}
@container (max-width:379px){.imp-x .xw{transform:scale(.64)}}
@container (max-width:339px){.imp-x .xw{transform:scale(.57)}}
@container (max-width:299px){.imp-x .xw{transform:scale(.5)}}

/* 노출 확대: 가장자리에 붙지 않도록 전체 여백을 더 확보 (좌우 최소 약 40px) */
.imp-x .xw{transform:scale(.88)}
.imp-x .xr{gap:8px}
@container (max-width:539px){.imp-x .xw{transform:scale(.82)}}
@container (max-width:499px){.imp-x .xw{transform:scale(.75)}}
@container (max-width:459px){.imp-x .xw{transform:scale(.68)}}
@container (max-width:419px){.imp-x .xw{transform:scale(.62)}}
@container (max-width:379px){.imp-x .xw{transform:scale(.56)}}
@container (max-width:339px){.imp-x .xw{transform:scale(.5)}}
@container (max-width:299px){.imp-x .xw{transform:scale(.44)}}

/* ===== 활용 사례: 강약 조절 (제목 크게, 설명 작고 연하게, 칩은 구분선 아래로) ===== */
.usecase-card{position:relative;padding:28px 28px 26px;border-top:3px solid var(--p)}
.usecase-card .icon{width:52px;height:52px;border-radius:14px}
.usecase-card small.uc-n{margin-top:18px}
.usecase-card small.uc-n b{font-size:15px;font-weight:700;color:var(--g5)}
.usecase-card small.uc-n span{background:var(--p);color:#fff;font-size:11.5px}
html[data-theme="dark"] .usecase-card small.uc-n b{color:var(--g5)}
html[data-theme="dark"] .usecase-card small.uc-n span{background:#7634CB;color:#fff}
.usecase-card h3{margin:14px 0 12px;font-size:25px;font-weight:800;line-height:1.3;letter-spacing:-.04em;color:var(--ink)}
.usecase-card p{font-size:13.5px;line-height:1.7;color:var(--g4)}
.usecase-flow{margin-top:18px;padding-top:16px;border-top:1px dashed var(--g3);gap:6px}
.usecase-flow span{padding:5px 11px;background:transparent;border:1px solid var(--g3);color:var(--g5);font-size:11.5px;font-weight:700}

/* 노출 확대: 아래쪽 여백 확보 (글씨와 진행 바 사이를 넓히고, 큰 이미지를 조금 줄임) */
.imp-x .xs{inset:0 0 42px}
.imp-x .xi{width:136px}
.imp-x .xi.s{width:112px}
.imp-x .xo{gap:6px}
.imp-x .xs{gap:12px}

/* 파트너 로고: 두 줄 모두 파트너 9곳 전체를 담아 같은 로고가 한 화면에 반복되지 않게. 위아래 줄 방향은 반대 */
.partner-track{animation:partner-scroll 44s linear infinite}
.partner-track.rev{animation-name:partner-scroll-r;animation-duration:50s}
.partner-chip{min-width:160px}
@media(max-width:560px){.partner-chip{min-width:132px}}

/* 파트너 로고: main.pongift.com의 파트너 24곳 (윗줄 12곳은 왼쪽, 아랫줄 12곳은 오른쪽으로 흐름) */
.partner-chip img{max-width:104px;max-height:30px;width:auto;height:auto;object-fit:contain}
.partner-track{animation-duration:60s}
.partner-track.rev{animation-duration:66s}
@media(max-width:560px){.partner-chip img{max-width:84px;max-height:26px}}

/* 활용 사례: 하단은 사용한 기능만 */
.usecase-flow{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.usecase-flow .uf-l{padding:0;border:0;background:none;color:var(--g4);font-size:12px;font-weight:700}
.usecase-flow .uf-f{padding:6px 12px;border:0;border-radius:999px;background:var(--pl);color:var(--pd);font-size:12.5px;font-weight:800}
html[data-theme="dark"] .usecase-flow .uf-f{background:rgba(167,139,250,.22);color:#e6d9ff}

/* 활용 사례: 상단은 업체명만, 하단에 방식 뱃지 하나 */
.usecase-card small.uc-n b{font-size:16px;font-weight:800;color:var(--ink)}
.usecase-flow .uf-b{padding:7px 14px;border-radius:999px;background:var(--p);color:#fff;font-size:12.5px;font-weight:800}
html[data-theme="dark"] .usecase-flow .uf-b{background:#7634CB;color:#fff}

/* 파트너: 윗줄과 아랫줄 사이를 확실히 띄움 (마지막에 선언해 다른 규칙에 덮이지 않게) */
.partners .partner-marquee{gap:96px!important;row-gap:96px!important}
@media(max-width:560px){.partners .partner-marquee{gap:56px!important;row-gap:56px!important}}
.partners .partner-marquee{display:grid!important}

/* 파트너: 두 줄 사이는 자연스럽게 (28px). 윗줄은 왼쪽, 아랫줄은 오른쪽으로 흐름 */
.partners .partner-marquee{gap:28px!important;row-gap:28px!important}
@media(max-width:560px){.partners .partner-marquee{gap:18px!important;row-gap:18px!important}}
.partners .partner-track{animation-name:partner-scroll}
.partners .partner-track.rev{animation-name:partner-scroll-r}
@keyframes partner-scroll-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* 활용 사례: 사업 카테고리를 크게, 구체 내용은 아래 작게 */
.usecase-card h3{font-size:28px;margin:10px 0 10px}
.usecase-card small.uc-n b{font-size:13px;font-weight:700;color:var(--g4)}
.usecase-card p{font-size:12.5px;line-height:1.6;color:var(--g4)}
.usecase-card .usecase-flow{margin-top:16px;padding-top:14px}

/* ===== FAQ: 질문(Q)과 답변(A) 구분 ===== */
html[data-theme] .faq summary{position:relative;gap:14px;justify-content:flex-start;padding:22px 44px 22px 6px;font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
html[data-theme] .faq summary:before{content:"Q";flex:none;width:30px;height:30px;border-radius:50%;background:#7634CB;color:#fff;font-size:14px;font-weight:800;display:grid;place-items:center}
html[data-theme] .faq summary svg{position:absolute;right:6px;top:50%;margin-top:-10px}
html[data-theme] .faq details[open] summary{color:#7634CB}
html[data-theme="dark"] .faq details[open] summary{color:#b79cff}
html[data-theme] .faq details p{position:relative;margin:0 6px 22px 6px;padding:18px 20px 18px 62px;border-radius:12px;background:var(--pl);color:var(--g5);font-size:15px;line-height:1.75;font-weight:400}
html[data-theme] .faq details p:before{content:"A";position:absolute;left:20px;top:17px;width:28px;height:28px;border-radius:50%;background:#fff;border:1.5px solid #7634CB;color:#7634CB;font-size:13px;font-weight:800;display:grid;place-items:center}
html[data-theme="dark"] .faq details p:before{background:#1f1830;border-color:#b79cff;color:#b79cff}
html[data-theme] .faq details[open]{margin:0;padding:0;border:0;border-bottom:1px solid var(--g2);border-radius:0;box-shadow:none}

/* FAQ: Q/A 아이콘 제거, 답변 배경 박스는 유지 */
html[data-theme] .faq summary:before,html[data-theme] .faq details p:before{content:none;display:none}
html[data-theme] .faq summary{padding-left:6px}
html[data-theme] .faq details p{padding:18px 22px}

/* 활용 사례: 카드 높이를 같게 하고, 하단 뱃지는 항상 같은 위치(맨 아래)에 */
.usecase-track{align-items:stretch}
.usecase-card{display:flex;flex-direction:column}
.usecase-card p{margin-bottom:18px}
.usecase-card .usecase-flow{margin-top:auto}

/* 노출 확대: 하단 4칸 진행 표시 제거, 장면을 카드 가운데로 */
.imp-x .xbars{display:none}
.imp-x .xs{inset:0}
/* 노출 확대 4번째 장면: 영수증 카드 하나만 크게 */
.imp-x .xs4 .xrc{width:236px;padding:18px 20px}
.imp-x .xs4 .xrc h4{font-size:14px}
.imp-x .xs4 .xrc div{font-size:12.5px}
.imp-x .xs4 .xrc .tt strong{font-size:24px}

/* FEATURES 아래 보충 안내 2가지 (WHY PONGIFT 섹션 삭제분 이동) */
.feature-notes{margin:16px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feature-notes li{display:flex;flex-direction:column;gap:6px;padding:22px 26px;border:1px solid var(--g2);border-radius:16px;background:var(--card,#fff)}
.feature-notes b{color:var(--ink);font-size:17px;font-weight:800;letter-spacing:-.02em}
.feature-notes span{color:var(--g4);font-size:14px;line-height:1.6}
@media(max-width:700px){.feature-notes{grid-template-columns:1fr}}

/* ===== 비용 절감 막대: 기존(회색) vs 폰기프트(보라)를 또렷하게 ===== */
html[data-theme] .imp-b .track{height:18px;border-radius:9px;background:#e4e6ec!important}
html[data-theme] .imp-b .fill{border-radius:9px;background:#c4c8d2!important}
html[data-theme] .imp-b .fill i{border-radius:9px;background:#7d8494!important}
html[data-theme] .imp-b .fill.new{background:#c9b6f5!important}
html[data-theme] .imp-b .fill.new i{background:#7634CB!important}
html[data-theme] .imp-b .row{font-size:14px;font-weight:700;color:#4b5160!important}
html[data-theme] .imp-b .row b{font-size:22px;color:#1E1E1E!important}
html[data-theme] .imp-b .row b.pg{color:#7634CB!important}
html[data-theme="dark"] .imp-b .track{background:#2e323d!important}
html[data-theme="dark"] .imp-b .fill{background:#4a4f5d!important}
html[data-theme="dark"] .imp-b .fill i{background:#8b92a3!important}
html[data-theme="dark"] .imp-b .fill.new{background:#5b4a8c!important}
html[data-theme="dark"] .imp-b .fill.new i{background:#a78bfa!important}
html[data-theme="dark"] .imp-b .row{color:#c9ccd3!important}
html[data-theme="dark"] .imp-b .row b{color:#f2f3f5!important}
html[data-theme="dark"] .imp-b .row b.pg{color:#b79cff!important}

/* 비용 절감 막대: 이전 애니메이션은 투명도가 처음부터 서서히 줄어 막대가 흐렸음. 차오른 뒤에는 또렷하게 유지하고 마지막에만 사라지게 */
@keyframes imp-fill2{0%{transform:scaleX(0);opacity:1}20%,88%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.imp-b .fill{animation-name:imp-fill2!important}

/* 활용 사례: 업종별 3D 이미지 아이콘 (assets/usecase) */
.usecase-card .icon.img{width:auto;height:auto;border-radius:0;background:none;display:block;margin:-8px 0 0 -12px}
.usecase-card .icon.img img{display:block;width:118px;height:118px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(60,35,110,.18))}
html[data-theme="dark"] .usecase-card .icon.img img{filter:drop-shadow(0 8px 12px rgba(0,0,0,.45))}
.usecase-card small.uc-n{margin-top:6px}

/* 활용 사례 이미지 아이콘: 작게 (어떤 업종인지 알아볼 정도) */
.usecase-card .icon.img{margin:0 0 0 -6px}
.usecase-card .icon.img img{width:64px;height:64px}
.usecase-card small.uc-n{margin-top:14px}

/* 활용 사례 카드 정렬: 아이콘, 업체명, 제목, 설명, 뱃지를 모두 왼쪽 끝에 맞춤 */
.usecase-card .icon.img{align-self:flex-start;width:fit-content;margin:0 0 2px -8px}
.usecase-card .icon.img img{margin:0!important}
.usecase-card{align-items:stretch;text-align:left}

/* 활용 사례 설명 문구: 두세 줄로 읽히게 */
.usecase-card p{font-size:13.5px;line-height:1.7;color:var(--g5)}
.usecase-card p{margin-bottom:18px}

/* REAL IMPACT 카드 설명: 긴 문장이 한두 단어만 남기고 넘어가지 않게 */
html[data-theme] .imp-card p{font-size:14px;line-height:1.8}

/* ===== 리스크 감소 v3: 상품권 한 장의 상태가 바뀜 (판매 완료: 수수료 0원 > 사용 완료: 수수료 발생), 약 4초, 끝 장면 유지 ===== */
.imp-r.rk2{gap:14px}
.tk{width:min(330px,100%);padding:16px 20px 14px;border-radius:16px;background:#fff;border:1px solid rgba(40,30,70,.12);border-top:4px solid #ff8a3d;box-shadow:0 14px 30px rgba(70,31,121,.12);text-align:left;animation:tk-in .5s ease .2s backwards,tk-bd .4s ease 3.0s backwards}
@keyframes tk-in{from{opacity:0;transform:translateY(10px)}}
@keyframes tk-bd{from{border-top-color:#7634CB}}
.tk-top{display:flex;justify-content:space-between;align-items:center}
.tk-n{color:#7634CB;font-size:15px;font-weight:800;letter-spacing:-.02em}
.tk-st{position:relative;width:88px;height:26px}
.tk-st i{position:absolute;inset:0;display:grid;place-items:center;border-radius:999px;font-size:12px;font-style:normal;font-weight:800}
.tk-st .a{background:#e3d8ff;color:#5c24a5;opacity:0;animation:tk-out .3s ease 3.0s backwards}
.tk-st .b{background:#ff8a3d;color:#fff;animation:tk-flip .45s ease 3.1s backwards}
.tk-name{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;color:var(--g5);font-size:14px;font-weight:700}
.tk-name b{color:#1E1E1E;font-size:24px;letter-spacing:-.03em}
.tk hr{margin:12px 0;border:0;border-top:1px dashed rgba(40,30,70,.2)}
.tk-fee{display:flex;align-items:center;justify-content:space-between;height:34px}
.tk-fee>span{color:var(--g4);font-size:13px;font-weight:800}
.tk-v{position:relative;flex:1;height:34px}
.tk-v b{position:absolute;right:0;top:0;bottom:0;display:flex;align-items:center;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.tk-v .v0{color:#7634CB;font-size:24px;opacity:0;animation:tk-out .3s ease 3.0s backwards}
.tk-v .v1{color:#d9480f;font-size:16px;animation:tk-flip .45s ease 3.15s backwards}
.tk-cap{position:relative;width:min(330px,100%);height:22px;margin:0;text-align:center;font-size:13.5px;font-weight:700}
.tk-cap span{position:absolute;left:0;right:0;top:0}
.tk-cap .c0{color:#5c24a5;opacity:0;animation:tk-out .3s ease 3.0s backwards}
.tk-cap .c1{color:#d9480f;animation:tk-flip .45s ease 3.15s backwards}
@keyframes tk-out{from{opacity:1}}
@keyframes tk-flip{from{opacity:0;transform:translateY(6px)}}
html[data-theme="dark"] .tk{background:#241a3d;border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .tk-n,html[data-theme="dark"] .tk-v .v0{color:#b79cff}
html[data-theme="dark"] .tk-name b{color:#f2eff8}
html[data-theme="dark"] .tk-st .a{background:rgba(167,139,250,.28);color:#e6d9ff}
html[data-theme="dark"] .tk-v .v1,html[data-theme="dark"] .tk-cap .c1{color:#ffa56b}
html[data-theme="dark"] .tk-cap .c0{color:#d9c8ff}
html[data-theme="dark"] .tk hr{border-top-color:rgba(255,255,255,.2)}
@media(prefers-reduced-motion:reduce){.rk2 *,.rk2 .tk{animation:none!important}}
@media(max-width:560px){.tk-name b{font-size:21px}.tk-v .v1{font-size:14px}}

/* 파트너: 제목 글과 로고 띠를 가깝게 (flex 세로 가운데 정렬 때문에 생기던 위아래 자동 여백 제거) */
.partners>.container{margin-top:0;margin-bottom:0}
.partners .section-head{margin-bottom:76px}
@media(max-width:560px){.partners .section-head{margin-bottom:44px}}

/* 너비 통일: PRICING·USE CASES도 다른 영역과 같은 1120px (화살표는 카드 바깥 여백으로) */
.pr-flow,.pr-note{max-width:1120px}
@media(min-width:1260px){.usecase-carousel>.usecase-nav{position:absolute;top:calc(50% - 30px);z-index:2}.usecase-carousel>.usecase-nav:first-child{left:-60px}.usecase-carousel>.usecase-nav:last-child{right:-60px}}

/* ===== 노출 확대 모바일: 작게 줄이지 않고 세로로 쌓아서 글씨가 읽히게 (장면 안은 위에서 아래로) ===== */
@media(max-width:560px){
  .imp-vis.imp-x{height:340px}
  .imp-x .xw{width:290px;height:320px;margin:-160px 0 0 -145px;transform:none!important}
  .imp-x .xs{inset:0 0 30px;gap:8px}
  .imp-x .xr{flex-direction:column;gap:4px}
  .imp-x .xc{font-size:14px}
  .imp-x .xa{font-size:0;line-height:0;height:16px;animation:none}
  .imp-x .xa:before{content:"\2193";font-size:18px;line-height:16px}
  .imp-x .xi{width:92px}
  .imp-x .xi.s{width:84px}
  .imp-x .xch{grid-template-columns:1fr 1fr;gap:6px}
  .imp-x .xch span{width:116px}
  .imp-x .xbars{left:40px;right:40px}
}

/* ===== 기업 분석 결과: 시장 분석·회사 현황·폰기프트 협업 전략 카드 영역을 줄임 (줄 수는 그대로, 여백과 글줄 간격만 조정) ===== */
.sc-modal .sc2-out{gap:10px}
.sc-modal .sc2-out>section{padding:12px 14px 14px}
.sc-modal .sc2-out>section h3{margin-bottom:6px}
.sc-modal .sc2-out>section li{padding-left:12px;font-size:12.5px;line-height:1.5}
.sc-modal .sc2-out>section li+li{margin-top:2px}
.sc-modal .sc2-out>.sc2-key{padding:12px 16px}
.sc-modal .fit{padding:16px 20px 18px}
.sc-modal .fit .fit-total b{font-size:42px}
@media(max-width:560px){.sc-modal .sc2-out>section li{font-size:13px}}
.sc2-demo .sc2-out{gap:12px}
.sc2-demo .sc2-out>section{height:214px;padding:13px 15px 14px}
.sc2-out>section li,.sc2-out .sc2-log li{font-size:12.5px;line-height:1.5}
.sc2-out>.sc2-key{padding:12px 16px}
.sc2-more .fit,.sc2-more .fit.sk{min-height:0;padding:16px 20px 18px}
.sc2-more .fit h3{margin-bottom:12px}
.fit .fit-total b{font-size:42px}
@media(max-width:900px){.sc2-demo .sc2-out>section{height:172px}}

/* 분석 결과 줄이 위로 밀려 올라가지 않고 위에서부터 차곡차곡 쌓이게 */
.sc2-out .sc2-log{justify-content:flex-start;-webkit-mask-image:none;mask-image:none;min-height:0}
.sc2-out .sc2-log li{opacity:.8}
.sc2-out .sc2-log li:nth-last-child(2){opacity:.8}
.sc2-out .sc2-log li:nth-last-child(1){opacity:1}
.sc2-demo .sc2-out>section{height:auto;min-height:252px;overflow:visible}

/* REAL IMPACT 제목: 한 줄로 (넓은 화면은 그대로 48px, 좁은 화면은 글자 크기를 줄여 줄바꿈 없이) */
html[data-theme] #impact .section-head{max-width:none}
html[data-theme] #impact .section-head h2{font-size:clamp(19px,5.2vw,48px);white-space:nowrap}

/* ===== 섹션 위아래 여백을 한 가지 규칙으로: 데스크톱 112px / 태블릿·모바일 80px (같은 배경끼리 이어질 때 내용 사이 224px) ===== */
html[data-theme] .section.impact,html[data-theme] .section.uses,html[data-theme] .section.pricing,html[data-theme] .section.faq,html[data-theme] .section.partners,html[data-theme] .closing,html[data-theme] .intro{padding-top:112px;padding-bottom:112px}
html[data-theme] .section.features{padding-top:112px;padding-bottom:96px}
html[data-theme] .section.partners{min-height:0;display:block}
html[data-theme] .try-sec .sc2{padding-top:112px;padding-bottom:112px}
@media(max-width:900px){
  html[data-theme] .section.impact,html[data-theme] .section.uses,html[data-theme] .section.pricing,html[data-theme] .section.faq,html[data-theme] .section.partners,html[data-theme] .closing,html[data-theme] .intro,html[data-theme] .section.features,html[data-theme] .try-sec .sc2{padding-top:80px;padding-bottom:80px}
  html[data-theme] .section.features{padding-bottom:64px}
}
/* 라이트 모드: 마무리 영역 로고는 헤더와 같은 보라색으로 (원본이 흰색이라 연보라 배경에서 안 보였음) */
html[data-theme="light"] .closing .container>img{filter:var(--logo-filter)}

/* 화면 밖 섹션이 임시 높이(984px)로 잡혀 간격이 컴퓨터마다 다르게 보이던 문제: content-visibility를 끄고 실제 높이로 항상 계산 */
html[data-theme] .section,html[data-theme] .closing,html[data-theme] .try-sec{content-visibility:visible;contain-intrinsic-size:none}

/* 섹션 위아래 여백: 화면 크기에 맞춰 줄어들게 (큰 모니터 112px, 노트북·배율 확대 화면은 가로·세로 크기에 비례해 최소 64px) */
:root{--sec-pad:clamp(64px,min(7.8vw,12.5vh),112px)}
html[data-theme] .section.impact,html[data-theme] .section.uses,html[data-theme] .section.pricing,html[data-theme] .section.faq,html[data-theme] .section.partners,html[data-theme] .closing,html[data-theme] .intro,html[data-theme] .try-sec .sc2{padding-top:var(--sec-pad);padding-bottom:var(--sec-pad)}
html[data-theme] .section.features{padding-top:var(--sec-pad);padding-bottom:calc(var(--sec-pad) - 16px)}
@media(max-width:900px){
  html[data-theme] .section.impact,html[data-theme] .section.uses,html[data-theme] .section.pricing,html[data-theme] .section.faq,html[data-theme] .section.partners,html[data-theme] .closing,html[data-theme] .intro,html[data-theme] .section.features,html[data-theme] .try-sec .sc2{padding-top:72px;padding-bottom:72px}
  html[data-theme] .section.features{padding-bottom:56px}
}

/* ===== USE CASES 2안: "이 기업은 이렇게 쓰고 있어요"가 먼저 읽히는 후기형 카드 (1안/2안 전환 버튼은 시안 비교용) ===== */
.uc-switch{display:flex;justify-content:center;gap:4px;width:max-content;margin:-20px auto 26px;padding:4px;border:1px solid var(--g2);border-radius:999px;background:var(--card,#fff)}
.uc-switch button{min-width:64px;height:34px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--g5);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.uc-switch button[aria-pressed="true"]{background:var(--p);color:#fff}
.uc2-grid{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.section.uses[data-v="2"] .uc2-grid{display:grid}
.section.uses[data-v="2"] .usecase-carousel{display:none}
.uc2-card{display:flex;flex-direction:column;gap:20px;padding:26px 26px 24px;border:1px solid var(--g2);border-radius:18px;background:var(--card,#fff)}
.uc2-head{display:flex;align-items:center;gap:12px}
.uc2-head img{flex:0 0 auto;width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(60,35,110,.16))}
.uc2-head div{min-width:0}
.uc2-head b{display:block;color:var(--ink);font-size:15px;font-weight:800;letter-spacing:-.02em}
.uc2-head em{display:block;margin-top:2px;color:var(--g4);font-size:12.5px;font-style:normal;font-weight:700}
.uc2-tag{flex:0 0 auto;margin-left:auto;padding:4px 10px;border-radius:999px;background:var(--pl);color:var(--pd);font-size:11.5px;font-weight:800;white-space:nowrap}
.uc2-q{position:relative;margin:0;padding-top:26px;color:var(--ink);font-size:19px;font-weight:700;line-height:1.55;letter-spacing:-.03em;word-break:keep-all}
.uc2-q:before{content:"\201C";position:absolute;left:-2px;top:-6px;color:#c9b3f0;font-size:46px;font-weight:800;line-height:1}
.uc2-q mark{padding:0 2px;background:linear-gradient(transparent 62%,rgba(118,52,203,.22) 62%);color:var(--p)}
html[data-theme="dark"] .uc2-q:before{color:#7a62b8}
html[data-theme="dark"] .uc2-q mark{color:#c9b3f0}
@media(max-width:1000px){.uc2-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.uc2-grid{grid-template-columns:minmax(0,1fr)}.uc2-q{font-size:18px}}

/* USE CASES 2안: 3D 아이콘 대신 업체 이름 첫 글자 아바타 (차분한 후기 카드 느낌) */
.uc2-av{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--pl);color:var(--pd);font-size:18px;font-weight:800;letter-spacing:-.02em}

/* USE CASES 2안 v2: 문장의 주어를 업체 이름으로 ("인*파이어 리조트는 ~ 쓰고 있어요") — 누가·어떻게가 한 문장으로 읽히게 */
.uc2-card{gap:16px;padding:24px 26px 26px}
.uc2-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.uc2-ind{color:var(--g4);font-size:12.5px;font-weight:700;letter-spacing:-.01em}
.uc2-q{padding-top:0;font-size:20px;line-height:1.6}
.uc2-q:before{display:none}
.uc2-q .uc2-co{font-weight:800;color:var(--ink)}
.uc2-q .uc2-jo{font-weight:700;color:var(--ink)}
@media(max-width:640px){.uc2-q{font-size:19px}}

/* USE CASES 2안 v3: 업체 이름을 윗줄에 크게(누가), 아래 문장은 차분하게(어떻게) */
.uc2-q .uc2-co{display:block;margin-bottom:10px;font-size:23px;font-weight:800;letter-spacing:-.035em;color:var(--ink)}
.uc2-q .uc2-jo{display:none}
.uc2-q{font-size:17px;font-weight:600;line-height:1.65;color:var(--g5)}
@media(max-width:640px){.uc2-q{font-size:16.5px}.uc2-q .uc2-co{font-size:22px}}

/* ===== USE CASES 2안 v4: 왼쪽 사진 + 오른쪽 설명 가로 카드 (참고 이미지 느낌). 사진은 assets/업종사진/01~06.jpg 를 넣으면 나오고, 없으면 은은한 그라데이션만 보임 ===== */
.uc3-wrap{display:none;position:relative;align-items:center;gap:12px}
.section.uses[data-v="2"] .uc3-wrap{display:flex}
.uc3-track{display:flex;flex:1;min-width:0;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 16px;scrollbar-width:none}
.uc3-track::-webkit-scrollbar{display:none}
.uc3-card{flex:0 0 min(430px,86%);display:flex;min-height:250px;overflow:hidden;scroll-snap-align:start;border:1px solid rgba(167,139,250,.5);border-radius:20px;background:linear-gradient(135deg,rgba(124,77,255,.30),rgba(38,20,84,.62));box-shadow:0 14px 34px rgba(26,10,64,.35);color:#f2eff8}
.uc3-ph{position:relative;flex:0 0 150px;background:radial-gradient(120% 90% at 20% 15%,#6b4fc4 0,#3a2878 45%,#1d1240 100%)}
.uc3-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.uc3-body{display:flex;flex:1;flex-direction:column;gap:12px;min-width:0;padding:22px 22px 20px}
.uc3-chips{display:flex;flex-wrap:wrap;gap:6px}
.uc3-chips span{padding:5px 12px;border-radius:999px;font-size:12px;font-weight:800;line-height:1.2;white-space:nowrap}
.uc3-ind{border:1px solid rgba(255,255,255,.3);color:#f2eff8}
.uc3-tag{background:#7634CB;color:#fff}
.uc3-body h3{margin:0;color:#fff;font-size:21px;font-weight:800;line-height:1.3;letter-spacing:-.03em}
.uc3-body p{margin:0;color:#cdc6da;font-size:13.5px;line-height:1.6;word-break:keep-all}
.uc3-co{margin-top:auto;color:#e3dbf5;font-size:13.5px;font-weight:700}
.uc3-nav{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(167,139,250,.5);border-radius:50%;background:rgba(124,77,255,.18);color:#f2eff8;cursor:pointer}
.uc3-nav svg{width:18px;fill:none;stroke:currentColor;stroke-width:2}
.uc3-nav:hover{background:rgba(124,77,255,.4)}
@media(max-width:640px){.uc3-nav{display:none}.uc3-card{flex-basis:88%}.uc3-ph{flex-basis:110px}.uc3-body h3{font-size:19px}}

/* 분석 결과 줄이 위로 밀려 사라지지 않게: 로그 영역을 내용 높이만큼 늘려서 7줄이 모두 쌓이게 (칸 높이는 가장 긴 칸에 맞춰짐) */
.sc2-out .sc2-log{flex:0 0 auto;overflow:visible}
.sc2-demo .sc2-out>section{overflow:visible}

/* 분석 칸 아래의 빈 공간 제거 (협업 전략 칸 안 빈 기능 칩 자리와 최소 높이) */
.sc2-out>section>.sc2-key:empty{display:none}
.sc2-demo .sc2-out>section{min-height:0}
.sc2-out .sc2-log{min-height:0}

/* 분석 결과 칸: 크기는 고정(5줄이 보이는 높이), 줄은 위에서부터 5줄까지 쌓이고 칸이 늘어나지 않음 */
.sc2-demo .sc2-out>section{height:260px;min-height:0;overflow:hidden}
.sc2-out .sc2-log{flex:1 1 auto;min-height:0;overflow:hidden}
@media(max-width:900px){.sc2-demo .sc2-out>section{height:auto;overflow:visible}}

/* 분석 결과 칸: 크기는 고정(4~5줄이 보이는 높이). 분석 문장은 전부 나오고, 칸이 차면 부드럽게 위로 스크롤되듯 올라감 */
.sc2-demo .sc2-out>section{height:196px;min-height:0;overflow:hidden}
.sc2-out .sc2-log{flex:1 1 0;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden}
.sc2-out .sc2-log li{flex:none}
.sc2-out .sc2-log.scrolled{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 28px);mask-image:linear-gradient(180deg,transparent 0,#000 28px)}
@media(max-width:900px){.sc2-demo .sc2-out>section{height:196px;overflow:hidden}}

/* USE CASES 2안 사진 칸을 조금 넓게 (가로형 사진 6종 사용) */
.uc3-ph{flex-basis:180px}
@media(max-width:640px){.uc3-ph{flex-basis:120px}}

/* USE CASES 2안 사진을 덜 튀게: 채도·밝기를 낮추고 보라색 막을 씌워 카드 색에 녹아들게 (사진 칸도 좁힘) */
.uc3-ph{flex-basis:150px}
.uc3-ph img{filter:saturate(.62) brightness(.8) contrast(.95);transition:filter .3s}
.uc3-ph:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(58,34,120,.30) 0%,rgba(44,24,98,.55) 55%,rgba(36,18,80,.96) 100%),linear-gradient(180deg,rgba(70,40,150,.22),rgba(24,12,56,.38))}
.uc3-card:hover .uc3-ph img{filter:saturate(.85) brightness(.92) contrast(1)}
@media(max-width:640px){.uc3-ph{flex-basis:104px}}

/* USE CASES 2안 사진: 너무 튀지도, 너무 흐리지도 않게 중간 정도 (채도·밝기를 조금만 낮추고 오른쪽 끝만 카드 색으로 부드럽게 이어짐) */
.uc3-ph{flex-basis:168px}
.uc3-ph img{filter:saturate(.88) brightness(.9) contrast(1)}
.uc3-ph:after{background:linear-gradient(90deg,rgba(58,34,120,.06) 0%,rgba(52,28,112,.12) 62%,rgba(40,20,88,.82) 100%)}
.uc3-card:hover .uc3-ph img{filter:saturate(1) brightness(1)}
@media(max-width:640px){.uc3-ph{flex-basis:112px}}

/* USE CASES 2안 카드를 보라색 대신 중립 차콜색으로 (이용 방식 칩만 보라색 포인트) */
.uc3-card{border:1px solid rgba(255,255,255,.14);background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.03));box-shadow:0 12px 30px rgba(0,0,0,.38)}
.uc3-ph{background:#24212c}
.uc3-ph:after{background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 62%,rgba(30,27,38,.9) 100%)}
.uc3-ind{border-color:rgba(255,255,255,.28)}
.uc3-nav{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08)}
.uc3-nav:hover{background:rgba(255,255,255,.18)}

/* USE CASES 2안 읽는 순서: 업체명(증거) → 업종(크게) → 이렇게 쓰고 있어요(문장) → 이용 방식 칩 + 상품 이름 */
.uc3-body{gap:10px}
.uc3-body .uc3-co{margin-top:0;font-size:13px;font-weight:700;color:#cdbff0;letter-spacing:-.01em}
.uc3-body h3.uc3-h{margin:0;color:#fff;font-size:26px;font-weight:800;line-height:1.25;letter-spacing:-.035em}
.uc3-body p{color:#f2eff8;font-size:15px;font-weight:500;line-height:1.6}
.uc3-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto}
.uc3-foot .uc3-tag{padding:5px 12px;border-radius:999px;background:#7634CB;color:#fff;font-size:12px;font-weight:800;line-height:1.2;white-space:nowrap}
.uc3-foot .uc3-prod{color:#aaa3bd;font-size:12.5px;font-weight:700}
@media(max-width:640px){.uc3-body h3.uc3-h{font-size:23px}.uc3-body p{font-size:14.5px}}

/* 모바일 히어로를 짧게 (화면 2.2개 분량 → 더 짧게): 홈페이지 입력칸은 숨기고, 버튼 두 개를 한 줄로, 분석 칸은 3줄 높이로 */
@media(max-width:760px){
  .hero-actions{flex-direction:row;gap:10px}
  .hero-actions .btn{flex:1 1 0;min-width:0;padding-inline:10px;font-size:14px}
  .sc2-form .sc2-field+.sc2-field{display:none}
  .sc2-demo .sc2-out{gap:10px}
  .sc2-demo .sc2-out>section{height:128px;padding:12px 14px}
  .sc2-out>.sc2-key,.sc2-more .sc2-key{padding:10px 14px}
  .sc2-more .fit,.sc2-more .fit.sk{padding:14px 16px 16px}
  .fit .fit-total b{font-size:34px}
}

/* 모바일 히어로 2차: 버튼 한 줄 고정, 기능 칩 영역은 모바일에서 숨김, 분석 칸 더 낮게, 소개 문장 글씨 조금 작게 */
@media(max-width:760px){
  .hero .hero-actions{flex-direction:row!important;gap:10px}
  .hero .hero-actions .btn{flex:1 1 0;min-width:0;padding-inline:8px;font-size:13.5px;white-space:normal;line-height:1.25}
  .sc2-demo .sc2-out>section{height:112px;padding:11px 14px}
  .sc2-more .sc2-key,.sc2-more .sc2-key.sk,.sc2-out>.sc2-key{display:none}
  .sc2-more .fit.sk{min-height:0;height:104px}
  .hero .lead{font-size:15px;line-height:1.6}
}

/* 모바일 히어로 3차: 실제 버튼 묶음(sc2-actions)을 한 줄로, 분석 결과 영역 자리 표시는 내용 높이에 맞춤 */
@media(max-width:760px){
  .sc2-actions{flex-direction:row!important;gap:10px;align-items:stretch}
  .sc2-actions .btn{flex:1 1 0;min-width:0;padding-inline:8px;font-size:13.5px;line-height:1.25;white-space:normal;text-align:center}
  .sc2-more .fit.sk{height:auto;min-height:0}
}

/* 푸터 문서 모달 (이메일 무단수집거부 / 개인정보처리방침) */
.doc-modal{width:min(820px,calc(100% - 32px));max-height:86vh;padding:0;border:1px solid var(--g2,rgba(255,255,255,.14));border-radius:20px;background:var(--card,#1f1830);color:var(--ink,#f2eff8);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.doc-modal::backdrop{background:rgba(8,5,16,.72)}
.doc-inner{position:relative;max-height:86vh;overflow-y:auto;padding:34px 36px 40px}
.doc-inner h2{margin:0 36px 18px 0;font-size:24px;font-weight:800;letter-spacing:-.03em}
.doc-close{position:sticky;top:0;float:right;margin:-14px -14px 0 0;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:inherit;font-size:24px;line-height:1;cursor:pointer}
.doc-close:hover{background:rgba(255,255,255,.18)}
.doc-body{font-size:14px;line-height:1.75;color:var(--g5,#cdc6da);word-break:keep-all}
.doc-body p{margin:0 0 10px}
.doc-body h3{margin:28px 0 10px;color:var(--ink,#f2eff8);font-size:16px;font-weight:800}
.doc-body .doc-n{margin-top:14px}
.doc-body .doc-h4{margin-top:18px;color:var(--ink,#f2eff8);font-weight:800}
.doc-body .doc-s{padding-left:14px}
.doc-body .doc-b{position:relative;padding-left:14px}
.doc-body .doc-b:before{content:"";position:absolute;left:3px;top:.8em;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}
.doc-meta{margin:0 0 16px;padding:0;list-style:none;color:var(--g4,#9a92ad);font-size:13px}
@media(max-width:640px){.doc-inner{padding:26px 20px 32px}.doc-inner h2{font-size:21px}}

/* ===== D안: 2번 폰기프트 소개를 4단계(상품·판매·사용·정산)로 — 4페이지 프로세스 형태(왼쪽 단계 목록 + 오른쪽 화면 창) 참고 ===== */
.dj{--dur:7000ms;margin:38px auto 0;max-width:1100px;text-align:left}
.dj-shell{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px;align-items:start}
.dj-steps{display:flex;flex-direction:column}
.dj-step{position:relative;display:grid;grid-template-columns:34px 1fr;gap:16px;padding:20px 6px;border:0;border-bottom:1px solid rgba(255,255,255,.12);background:none;color:#9a92ad;text-align:left;font:inherit;cursor:pointer}
.dj-num{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#cdc6da;font-size:13px;font-weight:800;transition:background .3s,color .3s,border-color .3s}
.dj-step.on .dj-num{border-color:transparent;background:#7634CB;color:#fff}
.dj-txt b{display:block;color:#9a92ad;font-size:18px;font-weight:800;transition:color .3s}
.dj-step.on .dj-txt b{color:#fff}
.dj-methods{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.dj-methods li{color:#9a92ad;font-size:13.5px;font-weight:600;line-height:1.45;padding-left:14px;position:relative}
.dj-methods li:before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7}
.dj-step.on .dj-methods li{animation:d-li .5s ease both;animation-delay:calc(var(--i)*1.2s + .3s)}
@keyframes d-li{0%{color:#9a92ad}100%{color:#fff}}
.dj-fill{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:#a78bfa;transform:scaleX(0);transform-origin:left}
.dj.run .dj-step.on .dj-fill{animation:d-prog var(--dur) linear forwards}
@keyframes d-prog{to{transform:scaleX(1)}}
.dj-screen{border:1px solid rgba(255,255,255,.14);border-radius:24px;background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),rgba(11,8,17,.88);box-shadow:0 30px 70px -20px rgba(0,0,0,.7);overflow:hidden}
.dj-top{display:flex;gap:6px;padding:15px 20px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.12)}
.dj-top i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25)}
.dj-body{min-height:400px;padding:28px 30px 32px}
.dj-view{display:none}
.dj-view.on{display:block;animation:dj-in .5s ease}
@keyframes dj-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dj-tag{display:inline-block;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.06em}
.dj-view h3{margin:12px 0 20px;color:#fff;font-size:22px;font-weight:900}
.d-vis{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;min-width:0}
.d-card{position:relative;flex:1 1 0;min-width:0;padding:16px 18px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(18,13,31,.7);color:#f2eff8}
.d-card small{display:block;margin-bottom:12px;color:#a78bfa;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.d-chip{display:inline-block;margin-top:12px;padding:5px 12px;border-radius:999px;background:#7634CB;color:#fff;font-size:12px;font-weight:800;opacity:0;transform:scale(.8);animation:d-pop .4s ease both;animation-delay:var(--t,2s)}
@keyframes d-pop{to{opacity:1;transform:none}}
.d-chip.sm{background:rgba(124,77,255,.28);color:#e6d9ff}
/* 1. 상품 */
.d-form .ln{display:block;height:10px;margin-bottom:10px;border-radius:5px;background:linear-gradient(90deg,#a78bfa,#7634CB);transform:scaleX(0);transform-origin:left;animation:d-grow .6s ease both}
.d-form .ln:nth-of-type(1){width:92%;animation-delay:.3s}.d-form .ln:nth-of-type(2){width:70%;animation-delay:.8s}.d-form .ln:nth-of-type(3){width:82%;animation-delay:1.3s}
@keyframes d-grow{to{transform:scaleX(1)}}
.d-api code{display:block;margin-bottom:7px;padding:6px 10px;border-radius:7px;background:rgba(255,255,255,.07);color:#cdc6da;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:12px;opacity:0;transform:translateX(-10px);animation:d-slide .4s ease both}
.d-api code:nth-of-type(1){animation-delay:1.8s}.d-api code:nth-of-type(2){animation-delay:2.2s}.d-api code:nth-of-type(3){animation-delay:2.6s}.d-api code:nth-of-type(4){animation-delay:3s}
@keyframes d-slide{to{opacity:1;transform:none}}
/* 2. 판매 */
.d-v1{justify-content:flex-start}
.d-voucher{flex:0 0 150px;height:98px;padding:12px 14px;border-radius:12px;background:linear-gradient(135deg,#a576ff,#7634CB 62%,#4d22ad);box-shadow:0 14px 26px rgba(94,40,170,.35);color:#fff;font-size:13px;font-weight:800;animation:d-pop .5s ease both}
.d-voucher b{display:block;margin-top:34px;font-size:18px}
.d-branches{flex:1;display:flex;flex-direction:column;gap:10px;position:relative;padding-left:34px}
.d-branches:before{content:"";position:absolute;left:0;top:50%;width:34px;height:2px;background:linear-gradient(90deg,transparent,#a78bfa);transform:scaleX(0);transform-origin:left;animation:d-grow .6s ease .4s both}
.d-tile{position:relative;display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(18,13,31,.7);font-size:14px;font-weight:800;opacity:0;transform:translateX(-12px);animation:d-slide .45s ease both;animation-delay:var(--t)}
.d-tile:before{content:"";position:absolute;left:-22px;top:50%;width:22px;height:2px;background:#a78bfa;opacity:.7}
.d-tile .d-chip{margin:0 0 0 auto;--t:inherit}
.d-tile img{max-height:16px;max-width:54px;background:#fff;border-radius:5px;padding:2px 5px}
.d-logos{display:flex;gap:5px}
.d-qr{width:26px;height:26px;border-radius:5px;background:repeating-conic-gradient(#f2eff8 0 25%,#241a3d 0 50%) 0 0/8px 8px}
/* 3. 사용 */
.d-v2{align-items:stretch}
.d-v2 .d-card{display:flex;flex-direction:column;gap:10px}
.d-btn{padding:9px 12px;border-radius:10px;background:#7634CB;color:#fff;text-align:center;font-size:13px;font-weight:800;animation:d-press 1s ease both;animation-delay:var(--t)}
@keyframes d-press{0%{transform:none}35%{transform:scale(.94)}60%{transform:none;background:#3aa56a}100%{transform:none;background:#3aa56a}}
.d-barcode{height:42px;border-radius:6px;background:repeating-linear-gradient(90deg,#f2eff8 0 2px,transparent 2px 5px,#f2eff8 5px 6px,transparent 6px 10px);position:relative;overflow:hidden}
.d-barcode:after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#a78bfa;box-shadow:0 0 10px #a78bfa;animation:d-scan 1.1s linear both;animation-delay:var(--t)}
@keyframes d-scan{0%{top:0}100%{top:calc(100% - 3px)}}
.d-v2 code{padding:7px 10px;border-radius:7px;background:rgba(255,255,255,.07);color:#cdc6da;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:12px}
.d-v2 .d-chip{margin-top:auto;align-self:flex-start;--t:inherit}
/* 4. 정산 */
.d-v3{align-items:stretch}
.d-set{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px}
.d-row{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:14px;font-size:14px;font-weight:700;color:#cdc6da}
.d-row i{display:block;height:12px;border-radius:6px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.d-row i:after{content:"";position:absolute;inset:0;border-radius:6px;background:linear-gradient(90deg,#a78bfa,#7634CB);transform:scaleX(0);transform-origin:left;animation:d-grow 1.1s ease both;animation-delay:var(--t)}
.d-set .d-row:nth-of-type(1) i:after{width:100%}.d-set .d-row:nth-of-type(2) i:after{width:14%}.d-set .d-row:nth-of-type(3) i:after{width:86%}
.d-set .d-chip{align-self:flex-start;margin-top:0}

@media(prefers-reduced-motion:reduce){.dj *{animation:none!important;opacity:1!important;transform:none!important}.dj-view .ln,.d-row i:after{transform:none!important}.dj-fill{display:none}.dj-methods li{color:#fff}}
@media(max-width:900px){.dj-shell{grid-template-columns:1fr;gap:18px}.dj-steps{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:4px}.dj-step{flex:0 0 auto;grid-template-columns:30px auto;padding:12px 14px;border:1px solid rgba(255,255,255,.14);border-radius:14px}.dj-methods{display:none}.dj-body{min-height:0;padding:22px 18px 26px}.d-v0,.d-v1,.d-v2,.d-v3{flex-direction:column;align-items:stretch}.d-voucher{flex:none;width:100%}.d-branches{padding-left:0}.d-branches:before,.d-tile:before{display:none}.d-row{grid-template-columns:100px 1fr}}

/* 방식별 서브 탭 (상품 2가지 / 판매 3가지 / 사용 3가지) — 한 번에 한 방식의 장면만 보여줌 */
.dj-sub{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.dj-sub button{padding:9px 16px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.05);color:#cdc6da;font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.dj-sub button:hover{border-color:rgba(167,139,250,.7);color:#fff}
.dj-sub button.on{border-color:transparent;background:#7634CB;color:#fff}
.dj-scenes{min-height:230px}
.d-scene{display:none}
.d-scene.on{display:flex;align-items:center;justify-content:center;gap:14px;min-height:230px;animation:dj-in .4s ease}
.d-scene.d-v1{justify-content:flex-start}
.d-scene .d-card{flex:0 1 460px}
.d-scene.d-v0 .d-card,.d-scene.d-v3 .d-card{flex-basis:520px}
.dj-methods li.cur{color:#fff}
.dj-step.on .dj-methods li{animation:none}
.d-api code:nth-of-type(1){animation-delay:.4s}.d-api code:nth-of-type(2){animation-delay:.8s}.d-api code:nth-of-type(3){animation-delay:1.2s}.d-api code:nth-of-type(4){animation-delay:1.6s}
.d-form .ln:nth-of-type(1){animation-delay:.2s}.d-form .ln:nth-of-type(2){animation-delay:.6s}.d-form .ln:nth-of-type(3){animation-delay:1s}
@media(max-width:900px){.d-scene.on{flex-direction:column;align-items:stretch}.d-scene .d-card{flex:none;width:100%}.dj-scenes{min-height:0}}

/* ===== 상품 단계 3가지 방식: 전문적인 로파이(와이어프레임) 느낌 — 회색 막대와 가는 선 위주, 핵심 동작에만 보라색 ===== */
.d-scene.d-v0{display:none}.d-scene.d-v0.on{display:block;min-height:290px}
.lf-type{display:inline-block;opacity:0;transform:translateX(-6px);animation:lf-t .45s ease both;animation-delay:var(--t,0s)}
@keyframes lf-t{to{opacity:1;transform:none}}
.lf-reg{display:grid;grid-template-columns:1fr .56fr;gap:20px;align-items:start}
.lf-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lf-field{padding:10px 12px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.04)}
.lf-field.wide{grid-column:1/-1}
.lf-field small,.lf-prev small,.lf-fill small,.lf-server small,.lf-list small{display:block;margin-bottom:4px;color:#9a92ad;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:10.5px;font-weight:600;letter-spacing:.02em}
.lf-field b{color:#f2eff8;font-size:13.5px;font-weight:700;min-height:19px;display:block}
.lf-upload{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:12px;border:1px dashed rgba(255,255,255,.28);border-radius:8px;color:#9a92ad;font-size:12.5px}
.lf-upload span{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:rgba(255,255,255,.1);color:#f2eff8}
.lf-actions{grid-column:1/-1;display:flex;gap:8px}
.lf-btn{padding:9px 16px;border-radius:7px;font-size:12.5px;font-weight:800}
.lf-btn.ghost{border:1px solid rgba(255,255,255,.2);color:#cdc6da}
.lf-btn.pri{background:#7634CB;color:#fff;animation:lf-press .5s ease both;animation-delay:var(--t,3s)}
@keyframes lf-press{50%{transform:scale(1.06)}}
.lf-toast{grid-column:1/-1;padding:9px 12px;border:1px solid rgba(61,220,155,.5);border-radius:8px;background:rgba(61,220,155,.1);color:#9be8c8;font-size:12.5px;font-weight:700;opacity:0;transform:translateY(4px);animation:lf-t .4s ease both;animation-delay:var(--t,3.6s)}
.lf-prev{padding:12px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.03)}
.lf-phone{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.05)}
.lf-ph{display:block;height:48px;border-radius:6px;background:rgba(255,255,255,.12)}
.lf-phone b{min-height:16px;color:#f2eff8;font-size:12px;font-weight:800}
.lf-bc{display:flex;gap:2px;height:22px}.lf-bc i{width:2px;background:rgba(255,255,255,.55)}.lf-bc i:nth-child(3n){width:3px}
.lf-phone em{color:#9a92ad;font-size:10px;font-style:normal}
/* 자사몰 연동 */
.lf-web{display:grid;grid-template-columns:1.1fr auto 1fr;gap:16px;align-items:center}
.lf-site{border:1px solid rgba(255,255,255,.18);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.03)}
.lf-urlbar{display:flex;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.14)}
.lf-lock{flex:0 0 10px;height:10px;border-radius:50%;background:rgba(255,255,255,.3)}
.lf-url{flex:1;min-width:0;padding:5px 8px;border-radius:6px;background:rgba(255,255,255,.08);color:#cdc6da;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:10.5px;white-space:nowrap;overflow:hidden}
.lf-go{flex:0 0 auto;padding:5px 10px;border-radius:6px;background:#7634CB;color:#fff;font-size:11px;font-weight:800;animation:lf-press .5s ease both;animation-delay:var(--t,1.4s)}
.lf-page{position:relative;display:grid;grid-template-columns:64px 1fr;gap:12px;padding:14px}
.lf-img{display:block;height:64px;border-radius:6px;background:rgba(255,255,255,.14)}
.lf-lines{display:flex;flex-direction:column;gap:8px;justify-content:center}
.lf-lines i{display:block;height:9px;border-radius:5px;background:rgba(255,255,255,.14)}
.lf-scan{position:absolute;left:0;right:0;top:0;height:2px;background:#a78bfa;box-shadow:0 0 12px #a78bfa;opacity:0;animation:lf-scan 1s linear both;animation-delay:var(--t,1.7s)}
@keyframes lf-scan{0%{top:0;opacity:1}100%{top:calc(100% - 2px);opacity:1}}
.lf-arrow{color:#a78bfa;font-size:22px;font-weight:700;opacity:0;animation:lf-t .4s ease both;animation-delay:var(--t,2.6s)}
.lf-fill{padding:14px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.03)}
.lf-row{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08);color:#9a92ad;font-size:12px;opacity:0;transform:translateY(4px);animation:lf-t .4s ease both;animation-delay:var(--t,2.8s)}
.lf-row b{color:#f2eff8;font-size:12.5px;font-weight:700}
.lf-thumb{display:block;width:30px;height:30px;border-radius:6px;background:rgba(255,255,255,.18)}
/* POS·API 연동 */
.lf-srv{display:grid;grid-template-columns:1fr 70px 1.1fr;gap:6px;align-items:center}
.lf-server{padding:14px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(255,255,255,.03)}
.lf-server i{display:block;height:14px;margin-bottom:6px;border-radius:4px;background:rgba(255,255,255,.12)}
.lf-server code{display:block;margin-top:8px;color:#cdc6da;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11px}
.lf-server code.ok{color:#9be8c8;opacity:0;animation:lf-t .3s ease both;animation-delay:var(--t,.9s)}
.lf-pipe{position:relative;height:60px;border-top:1px dashed rgba(167,139,250,.6);margin-top:0}
.lf-pipe u{position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:2px;background:#a78bfa;opacity:0;animation:lf-pk 1.1s linear both;animation-delay:var(--t)}
@keyframes lf-pk{0%{left:0;opacity:1}100%{left:calc(100% - 9px);opacity:1}}
.lf-list{padding:14px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.03)}
.lf-item{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(4px);animation:lf-t .4s ease both;animation-delay:var(--t,1s)}
.lf-item i{flex:0 0 22px;height:22px;border-radius:5px;background:rgba(255,255,255,.16)}
.lf-item b{height:9px;border-radius:5px;background:rgba(255,255,255,.18)}
.lf-item em{margin-left:auto;color:#9be8c8;font-size:11px;font-style:normal;font-weight:700}
.lf-list .d-chip{margin-top:12px}
@media(max-width:900px){.lf-reg,.lf-web,.lf-srv{grid-template-columns:1fr}.lf-arrow{transform:rotate(90deg);justify-self:center}.lf-pipe{height:34px;border-top:0;border-left:1px dashed rgba(167,139,250,.6);margin-left:14px}.lf-pipe u{display:none}.lf-form{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.d-scene.d-v0 *{animation:none!important;opacity:1!important;transform:none!important}.lf-scan,.lf-pipe u{display:none}}

/* 실제 이미지·상품명으로 */
.lf-up{flex:0 0 36px;width:36px;height:36px;border-radius:6px;object-fit:cover;opacity:0;animation:lf-t .4s ease both;animation-delay:var(--t,2.2s)}
.lf-fn{color:#cdc6da;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11.5px}
.lf-upload span.lf-fn{display:inline-block;width:auto;height:auto;background:none;color:#cdc6da}
.lf-ph{display:block;width:100%;height:78px;object-fit:cover;border-radius:6px}
.lf-img{display:block;width:64px;height:64px;object-fit:cover;border-radius:6px}
.lf-thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:6px}
.lf-item img{flex:0 0 28px;width:28px;height:28px;border-radius:6px;object-fit:cover}
.lf-item span{flex:1;min-width:0;color:#e6e0f2;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== 판매 단계: 온라인 커머스(채널별 API 전송) / 매장 선물하기(QR → 매장 몰 → 받는 분 입력) ===== */
.d-scene.d-v1.on{display:block;min-height:290px}
.sc-on{display:grid;grid-template-columns:190px 70px 1fr;gap:6px;align-items:center}
.sc-prod{padding:12px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(255,255,255,.04)}
.sc-prod small,.sc-st>small{display:block;margin-bottom:8px;color:#9a92ad;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:10.5px;font-weight:600}
.sc-prod img{display:block;width:100%;height:84px;object-fit:cover;border-radius:6px;margin-bottom:8px}
.sc-prod b{display:block;color:#f2eff8;font-size:12.5px;font-weight:800;line-height:1.35}
.sc-prod span{display:block;margin-top:4px;color:#cdc6da;font-size:12px}
.sc-fan{position:relative;height:150px;border-left:1px dashed rgba(167,139,250,.6);margin-left:6px}
.sc-fan u{position:absolute;left:0;top:50%;width:9px;height:9px;border-radius:2px;background:#a78bfa;opacity:0;animation:sc-pk 1s linear both;animation-delay:var(--t)}
.sc-fan u:nth-child(1){--y:-52px}.sc-fan u:nth-child(2){--y:0px}.sc-fan u:nth-child(3){--y:52px}
@keyframes sc-pk{0%{transform:translate(0,0);opacity:1}100%{transform:translate(58px,var(--y));opacity:1}}
.sc-chs{display:flex;flex-direction:column;gap:10px}
.sc-ch{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.04);opacity:0;transform:translateX(-8px);animation:lf-t .4s ease both;animation-delay:var(--t)}
.sc-lg{flex:0 0 auto;height:18px;max-width:58px;padding:2px 5px;border-radius:5px;background:#fff}
.sc-ch code{flex:1;min-width:0;color:#cdc6da;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-ok{color:#9be8c8;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11px;font-weight:700;opacity:0;animation:lf-t .3s ease both;animation-delay:var(--t)}
.sc-ch .d-chip{margin:0}
.sc-gift{display:grid;grid-template-columns:1fr auto 1.15fr auto 1.15fr;gap:10px;align-items:center}
.sc-qrbox{position:relative;display:grid;place-items:center;height:130px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(255,255,255,.04);overflow:hidden}
.sc-qr{width:72px;height:72px;border-radius:6px;background:repeating-conic-gradient(#f2eff8 0 25%,#241a3d 0 50%) 0 0/9px 9px}
.sc-scanline{position:absolute;left:12px;right:12px;top:14px;height:2px;background:#a78bfa;box-shadow:0 0 12px #a78bfa;opacity:0;animation:lf-scan 1s linear both;animation-delay:var(--t)}
.sc-st>em{display:block;margin-top:8px;color:#9a92ad;font-size:11.5px;font-style:normal;text-align:center}
.sc-phone{display:flex;flex-direction:column;gap:7px;padding:10px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(255,255,255,.04)}
.sc-urlb{padding:5px 8px;border-radius:6px;background:rgba(255,255,255,.08);color:#cdc6da;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:9.5px;white-space:nowrap;overflow:hidden;min-height:22px}
.sc-phone img{display:block;width:100%;height:58px;object-fit:cover;border-radius:6px}
.sc-phone b{color:#f2eff8;font-size:11.5px;font-weight:800;line-height:1.3}
.sc-phone span{color:#cdc6da;font-size:11px}
.sc-phone .sc-giftbtn{padding:7px;border-radius:7px;background:#7634CB;color:#fff;text-align:center;font-weight:800;animation:lf-press .5s ease both;animation-delay:var(--t)}
.sc-form{display:flex;flex-direction:column;gap:8px}
.sc-form .lf-btn{text-align:center}
@media(max-width:900px){.sc-on,.sc-gift{grid-template-columns:1fr}.sc-fan{height:30px;margin-left:14px}.sc-fan u{display:none}.sc-gift .lf-arrow{transform:rotate(90deg);justify-self:center}}
@media(prefers-reduced-motion:reduce){.sc-on *,.sc-gift *{animation:none!important;opacity:1!important;transform:none!important}.sc-fan u,.sc-scanline{display:none}}

/* 온라인 커머스 노출: 상품권에서 각 채널로 선이 쭉 뻗어 나가며 API 전송 (이전 방식으로 되돌림) */
.sc-on{grid-template-columns:150px 1fr;gap:56px;align-items:center}
.sc-v{flex:none;width:150px;height:98px}
.sc-chs{position:relative}
.sc-chs:before{content:"";position:absolute;left:-56px;top:50%;width:28px;height:2px;background:#a78bfa;transform:scaleX(0);transform-origin:left;animation:d-grow .5s ease .3s both}
.sc-ch{position:relative}
.sc-ch:before{content:"";position:absolute;left:-28px;top:50%;width:28px;height:2px;background:linear-gradient(90deg,#a78bfa,rgba(167,139,250,.5));transform:scaleX(0);transform-origin:left;animation:d-grow .5s ease both;animation-delay:calc(var(--t) - .45s)}
.sc-ch:after{content:"";position:absolute;left:-28px;top:50%;width:7px;height:7px;margin-top:-3px;border-radius:2px;background:#a78bfa;opacity:0;animation:sc-run .7s linear both;animation-delay:calc(var(--t) - .4s)}
@keyframes sc-run{0%{transform:translateX(0);opacity:1}100%{transform:translateX(24px);opacity:0}}
@media(max-width:900px){.sc-on{grid-template-columns:1fr;gap:16px}.sc-v{width:100%}.sc-chs:before,.sc-ch:before,.sc-ch:after{display:none}}

/* 자사몰 연동: 여러 상품을 한 번에 가져옴 */
.lf-page.lf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px}
.lf-g{position:relative;display:block;border-radius:6px;overflow:hidden}
.lf-g img{display:block;width:100%;height:58px;object-fit:cover}
.lf-g i{display:block;height:6px;margin:4px 2px;border-radius:3px;background:rgba(255,255,255,.16)}
.lf-row2{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(4px);animation:lf-t .4s ease both;animation-delay:var(--t)}
.lf-row2 img{width:30px;height:30px;border-radius:6px;object-fit:cover}
.lf-row2 span{min-width:0;color:#e6e0f2;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-row2 b{color:#cdc6da;font-size:11.5px;font-weight:700}
.lf-fill .d-chip{margin-top:10px}
/* 온라인 커머스: 상품권에서 각 채널까지 선이 끊김 없이 쭉 이어짐 */
.sc-chs:before{display:none}
.sc-ch:before{left:-56px!important;width:56px!important}
.sc-ch:after{left:-56px!important;animation-name:sc-run2!important}
@keyframes sc-run2{0%{transform:translateX(0);opacity:1}100%{transform:translateX(50px);opacity:1}}

/* 온라인 커머스 노출 v3: 상품권과 채널은 처음부터 보이고, 사이의 선을 따라 API 요청이 계속 달려감 */
.sc-on.sc-grid{display:grid;grid-template-columns:150px 84px 1fr;grid-template-rows:repeat(3,auto);column-gap:0;row-gap:12px;align-items:center}
.sc-grid .sc-v{grid-column:1;grid-row:1/4}
.sc-grid .sc-lane{grid-column:2;position:relative;height:2px;background:rgba(167,139,250,.65)}
.sc-grid .sc-lane:nth-of-type(1){grid-row:1}.sc-grid .sc-lane:nth-of-type(2){grid-row:2}.sc-grid .sc-lane:nth-of-type(3){grid-row:3}
.sc-grid .sc-ch{grid-column:3;opacity:1;transform:none;animation:none}
.sc-grid .sc-ch:nth-of-type(1){grid-row:1}.sc-grid .sc-ch:nth-of-type(2){grid-row:2}.sc-grid .sc-ch:nth-of-type(3){grid-row:3}
.sc-grid .sc-ch:before,.sc-grid .sc-ch:after,.sc-grid .sc-chs:before{display:none}
.sc-lane i{display:none}
.sc-lane u{position:absolute;left:0;top:-4px;width:10px;height:10px;border-radius:3px;background:#a78bfa;box-shadow:0 0 10px #a78bfa;animation:sc-go 1.5s linear infinite;animation-delay:var(--t)}
@keyframes sc-go{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}
.sc-grid .sc-lane:after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid rgba(167,139,250,.9);border-right:0}
@media(max-width:900px){.sc-on.sc-grid{grid-template-columns:1fr}.sc-grid .sc-v{grid-column:1;grid-row:auto;width:100%}.sc-grid .sc-lane{grid-column:1;grid-row:auto!important;width:2px;height:22px;margin-left:14px}.sc-grid .sc-lane u{display:none}.sc-grid .sc-ch{grid-column:1;grid-row:auto!important}}
@media(prefers-reduced-motion:reduce){.sc-lane u{display:none}}

/* 유통채널(오픈마켓) 노출 v4 (처음 콘솔 방식): 상품권이 작아지고, 채널은 "대기"로 보이다가 하나씩 선이 이어지며 "판매 중"으로 켜짐 */
.sc-v4 .sc-v{animation:sc-shrink .7s ease .5s both;transform-origin:left center}
@keyframes sc-shrink{to{transform:scale(.78)}}
.sc-v4 .sc-lane{background:rgba(255,255,255,.14);animation:sc-lane-on .4s ease both;animation-delay:var(--t)}
@keyframes sc-lane-on{to{background:rgba(167,139,250,.9)}}
.sc-v4 .sc-lane u{animation:sc-go1 .9s linear both;animation-delay:var(--t);opacity:0}
@keyframes sc-go1{0%{left:0;opacity:1}100%{left:calc(100% - 10px);opacity:1}}
.sc-v4 .sc-ch{opacity:.5;border-color:rgba(255,255,255,.12);animation:sc-act .5s ease both!important;animation-delay:calc(var(--t) + .8s)!important}
@keyframes sc-act{to{opacity:1;border-color:rgba(167,139,250,.7);background:rgba(124,77,255,.14)}}
.sc-st{flex:0 0 auto;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
.sc-st0{background:rgba(255,255,255,.1);color:#9a92ad;animation:sc-hide .3s ease both;animation-delay:calc(var(--t) + .8s)}
@keyframes sc-hide{to{opacity:0;position:absolute;visibility:hidden}}
.sc-st1{display:none}
.sc-v4 .sc-ch{position:relative}
.sc-v4 .sc-ch .sc-st1{display:inline-block;position:absolute;right:12px;background:#7634CB;color:#fff;opacity:0;animation:lf-t .4s ease both;animation-delay:calc(var(--t) + .85s)}
.sc-v4 .sc-ch code{padding-right:78px}

/* 자사몰: 실제 예약·구매 사이트처럼 (상단 메뉴, 배너, 상품 카드, 구매하기 버튼) */
.lf-web{grid-template-columns:1.5fr auto 1fr}
.lf-shop{background:#fff;color:#1e1b26;overflow:hidden}
.lf-nav{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid #e6e2ee;font-size:10px}
.lf-brand{color:#2b2540;font-size:11px;font-weight:900;letter-spacing:.08em;white-space:nowrap}
.lf-menu{display:flex;gap:9px;margin-left:6px;color:#6b6580;font-weight:700}
.lf-menu i{font-style:normal;white-space:nowrap}.lf-menu i.on{color:#7634CB}
.lf-cart{margin-left:auto;color:#6b6580;font-weight:700;white-space:nowrap}.lf-cart b{display:inline-block;min-width:14px;padding:1px 4px;border-radius:7px;background:#7634CB;color:#fff;text-align:center}
.lf-hero{position:relative;height:62px;overflow:hidden}
.lf-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lf-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,14,40,.75),rgba(20,14,40,.1))}
.lf-hero span{position:absolute;left:14px;top:50%;transform:translateY(-50%);z-index:1;color:#fff;font-size:13px;font-weight:900;line-height:1.3}
.lf-hero small{display:block;margin-top:2px;font-size:9.5px;font-weight:600;opacity:.9}
.lf-cards{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 12px 12px;background:#f7f5fb}
.lf-sc{display:flex;flex-direction:column;gap:3px;padding:5px;border:1px solid #e6e2ee;border-radius:7px;background:#fff}
.lf-sc img{display:block;width:100%;height:46px;object-fit:cover;border-radius:4px}
.lf-sc b{color:#1e1b26;font-size:9.5px;font-weight:800;line-height:1.25}
.lf-sc em{color:#7634CB;font-size:9.5px;font-style:normal;font-weight:800}
.lf-sc u{margin-top:2px;padding:3px 0;border-radius:4px;background:#2b2540;color:#fff;font-size:9px;font-weight:800;text-align:center;text-decoration:none}
@media(max-width:900px){.lf-menu{display:none}}

/* 상품권 번호 20자(****-****-****-****-****), 바코드는 카드 폭을 가득 채움 */
.lf-bc{display:block;width:100%;height:30px;gap:0;border-radius:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 2px,transparent 2px 4px,rgba(255,255,255,.85) 4px 5px,transparent 5px 8px,rgba(255,255,255,.85) 8px 11px,transparent 11px 13px)}
.lf-phone em{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:.02em;text-align:center;white-space:nowrap}

/* POS·API 연동: 실제 매장 POS 단말 화면처럼 (상단 바, 카테고리 탭, 상품 마스터 표) */
.lf-srv.lf-pos{grid-template-columns:1.25fr 56px 1fr}
.pos{border:1px solid rgba(255,255,255,.22);border-radius:12px;background:#15121f;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.pos-top{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#2a2538;border-bottom:1px solid rgba(255,255,255,.12)}
.pos-top b{color:#f2eff8;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.06em}
.pos-sync{display:flex;align-items:center;gap:6px;color:#9be8c8;font-size:10.5px;font-weight:800}
.pos-sync i{width:7px;height:7px;border-radius:50%;background:#3ddc9b;animation:pos-blink 1.2s ease-in-out infinite}
@keyframes pos-blink{50%{opacity:.3}}
.pos-tabs{display:flex;gap:6px;padding:8px 12px 4px}
.pos-tabs i{padding:4px 10px;border-radius:6px;background:rgba(255,255,255,.07);color:#9a92ad;font-size:10.5px;font-style:normal;font-weight:800}
.pos-tabs i.on{background:#cdc6da;color:#15121f}
.pos-head,.pos-r{display:grid;grid-template-columns:62px 1fr auto;gap:10px;align-items:center;padding:7px 12px}
.pos-head{color:#6f6785;font-size:10px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.08)}
.pos-r{border-bottom:1px solid rgba(255,255,255,.06);box-shadow:inset 0 0 0 0 #7634CB;animation:pos-hit .6s ease both;animation-delay:var(--t)}
@keyframes pos-hit{0%{background:transparent}30%{background:rgba(124,77,255,.28);box-shadow:inset 3px 0 0 0 #a78bfa}100%{background:transparent;box-shadow:inset 3px 0 0 0 #a78bfa}}
.pos-r code{color:#8a82a0;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:10px}
.pos-r span{min-width:0;color:#e6e0f2;font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos-r b{color:#f2eff8;font-size:11.5px;font-weight:800}
.pos-foot{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(255,255,255,.04);color:#9a92ad;font-size:10px}
.pos-foot code{margin-left:auto;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;color:#cdc6da}
.pos-foot em{color:#9be8c8;font-style:normal;font-weight:800;opacity:0;animation:lf-t .3s ease both;animation-delay:var(--t)}
@media(max-width:900px){.lf-srv.lf-pos{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.pos *{animation:none!important;opacity:1!important}}

/* 유통채널(오픈마켓) 노출 v5: 선 없이 자연스럽게 — 상품권이 작아지면 채널 카드가 하나씩 떠오르고 "전송 중" → "판매 중"으로 바뀜 */
.sc-on.sc-v4{grid-template-columns:150px 1fr;column-gap:36px;row-gap:12px}
.sc-v4 .sc-v{animation:sc-shrink .8s cubic-bezier(.2,.8,.2,1) .4s both}
.sc-v4 .sc-ch{grid-column:2;border-color:rgba(255,255,255,.14);animation:sc-pop .7s cubic-bezier(.2,.8,.2,1) both!important;animation-delay:calc(var(--t) - .3s)!important}
@keyframes sc-pop{0%{opacity:0;transform:translateX(-22px) scale(.97)}100%{opacity:1;transform:none;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.05)}}
.sc-v4 .sc-ch code{padding-right:96px}
.sc-v4 .sc-st0{position:absolute;right:12px;background:rgba(167,139,250,.18);color:#d9ccff;animation:sc-hide .35s ease both!important;animation-delay:calc(var(--t) + .9s)!important}
.sc-v4 .sc-st0:before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#a78bfa;animation:pos-blink .8s ease-in-out infinite}
.sc-v4 .sc-ch .sc-st1{animation-delay:calc(var(--t) + .95s)!important}
.sc-v4 .sc-ch{animation-fill-mode:both}

/* 유통채널(오픈마켓) 노출 v6 — 4안 B 콘솔의 판매 채널 열을 그대로: 큰 로고 카드 네 칸이 "대기"로 쌓여 있다가 차례로 켜져 "판매 중", 칸 왼쪽의 짧은 선만 불이 들어옴 */
.bk{display:grid;grid-template-columns:150px 1fr;gap:44px;align-items:center}
.bk-v{flex:none;width:150px;animation:bk-shrink .8s cubic-bezier(.2,.8,.2,1) .5s both;transform-origin:left center}
@keyframes bk-shrink{to{transform:scale(.8)}}
.bk-list{display:flex;flex-direction:column;gap:10px}
.bk-ch{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:0 14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.04);animation:bk-card .5s ease both;animation-delay:calc(var(--t) + .1s)}
@keyframes bk-card{to{border-color:rgba(167,139,250,.75);background:rgba(124,77,255,.16)}}
.bk-ch:before{content:"";position:absolute;left:-20px;top:50%;width:20px;height:2px;background:rgba(255,255,255,.18);animation:bk-line .4s ease both;animation-delay:var(--t)}
@keyframes bk-line{to{background:#a78bfa;box-shadow:0 0 8px #a78bfa}}
.bk-lg{flex:0 0 auto;height:26px;max-width:110px;padding:3px 8px;border-radius:7px;background:#fff;object-fit:contain}
.bk-txt{flex:0 0 auto;color:#f2eff8;font-size:15px;font-weight:800;letter-spacing:-.02em}
.bk-ch code{flex:1;min-width:0;color:#8a82a0;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;animation:lf-t .4s ease both;animation-delay:calc(var(--t) + .1s)}
.bk-st,.bk-on{position:absolute;right:12px;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
.bk-st{background:rgba(255,255,255,.1);color:#9a92ad;animation:bk-hide .3s ease both;animation-delay:calc(var(--t) + .5s)}
@keyframes bk-hide{to{opacity:0;visibility:hidden}}
.bk-on{background:#7634CB;color:#fff;opacity:0;animation:lf-t .4s ease both;animation-delay:calc(var(--t) + .5s)}
@media(max-width:900px){.bk{grid-template-columns:1fr;gap:16px}.bk-v{width:100%;transform:none;animation:none}.bk-ch:before{display:none}}
@media(prefers-reduced-motion:reduce){.bk *{animation:none!important;opacity:1!important}.bk-st{display:none}.bk-ch{border-color:rgba(167,139,250,.75)}}

/* 유통채널 노출: 상품권은 작아지지 않고, 장면이 열리면 부드럽게 생겨남 */
.bk-v{animation:bk-appear .7s cubic-bezier(.2,.8,.2,1) .15s both!important;transform-origin:center}
@keyframes bk-appear{0%{opacity:0;transform:translateY(14px) scale(.9)}100%{opacity:1;transform:none}}

/* 유통채널 노출: 상품권에서 나온 선이 하나의 줄기로 모였다가 네 채널로 갈라짐 (선이 따로 놀지 않게) */
.bk-list{position:relative}
.bk-list:before{content:"";position:absolute;left:-22px;top:28px;bottom:28px;width:2px;background:rgba(255,255,255,.18);transform-origin:top;transform:scaleY(0);animation:bk-spine .6s ease .5s both}
@keyframes bk-spine{to{transform:scaleY(1);background:#a78bfa}}
.bk-list:after{content:"";position:absolute;left:-44px;top:50%;width:22px;height:2px;margin-top:-1px;background:rgba(255,255,255,.18);transform-origin:left;transform:scaleX(0);animation:bk-trunk .4s ease .3s both}
@keyframes bk-trunk{to{transform:scaleX(1);background:#a78bfa}}
.bk-ch:before{left:-22px!important;width:22px!important;height:2px;margin-top:-1px;animation:bk-line .4s ease both!important;animation-delay:var(--t)!important}
@media(max-width:900px){.bk-list:before,.bk-list:after{display:none}}

/* ① 매장 테이블에 놓인 QR 카드 (테이블 주문 QR처럼): 안내 문구 + QR + 테이블 번호 */
.tq{position:relative;padding-bottom:10px}
.tq-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 12px 10px;border:1px solid rgba(255,255,255,.2);border-radius:10px 10px 4px 4px;background:rgba(255,255,255,.07);text-align:center}
.tq-brand{color:#cdbff0;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:.1em}
.tq-card strong{color:#f2eff8;font-size:12px;font-weight:800;line-height:1.35}
.tq-card>span{color:#9a92ad;font-size:9.5px;line-height:1.3}
.tq-qr{height:84px;width:84px;border-radius:6px;background:#fff;border:0}
.tq-qr .sc-qr{width:60px;height:60px}
.tq-no{color:#9a92ad;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:9.5px;font-style:normal;letter-spacing:.08em}
.tq-table{position:absolute;left:-6px;right:-6px;bottom:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.18)}
.sc-st>em.tq-cap{margin-top:12px;color:#9a92ad;font-size:11.5px;font-style:normal;text-align:center}

/* 줄기 선을 실제 요소로 (선이 안 보이던 문제 수정) + 매장 선물하기 3단 폭 고정 */
.bk-list:before,.bk-list:after{display:none!important}
.bk-trunk{position:absolute;left:-44px;top:50%;width:22px;height:2px;margin-top:-1px;background:rgba(255,255,255,.18);transform-origin:left;transform:scaleX(0);animation:bk-trunk .4s ease .3s both}
.bk-spine{position:absolute;left:-23px;top:28px;bottom:28px;width:3px;background:rgba(255,255,255,.18);transform-origin:top;transform:scaleY(0);animation:bk-spine .6s ease .5s both}
@media(max-width:900px){.bk-trunk,.bk-spine{display:none}}
.sc-gift{grid-template-columns:150px auto minmax(0,1fr) auto minmax(0,1fr);gap:8px}
.tq-card{padding:10px 8px 8px}.tq-card strong{font-size:11.5px}.tq-card>span{font-size:9px}

/* 유통채널 선 순서: ① 상품권에서 나오는 가로선 → ② 줄기가 가운데에서 위아래로 퍼짐 → ③ 각 칸 앞 선이 켜지며 칸이 "판매 중" */
.bk-trunk{animation:bk-trunk .35s ease .3s both!important}
.bk-spine{transform-origin:center!important;transform:scaleY(0);animation:bk-spine .5s ease .7s both!important}
.bk-ch:before{background:rgba(255,255,255,.18)}
/* 매장 선물하기: 글자 넘침 방지 */
.sc-gift{grid-template-columns:minmax(0,1fr) 18px minmax(0,1.1fr) 18px minmax(0,1fr);gap:6px}
.sc-gift .sc-st,.sc-gift .sc-st>*{min-width:0}
.sc-gift .lf-arrow{font-size:18px}
.tq-card{padding:10px 6px 8px}
.tq-card strong{font-size:10.5px;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
.tq-card>span{font-size:8.5px;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
.tq-brand{font-size:8.5px}
.tq-qr{width:76px;height:76px}.tq-qr .sc-qr{width:54px;height:54px}
.sc-urlb{font-size:8.5px;padding:5px 6px}
.sc-phone b{font-size:10.5px;white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
.sc-phone span{font-size:10px}
.sc-form .lf-field{padding:8px 9px}
.sc-form .lf-field b{font-size:11.5px;white-space:nowrap}
.sc-form .lf-btn{font-size:11.5px;padding:8px 6px;white-space:nowrap}
.sc-form .lf-toast{font-size:11px;padding:8px 8px;white-space:nowrap}
.sc-st>small{white-space:nowrap}
.sc-st>em.tq-cap{font-size:10.5px}
.sc-urlb{font-size:8px;padding:5px 5px;letter-spacing:-.02em}

/* ===== 매장 선물하기 (쉬운 버전): 테이블 QR 카드 → 폰에서 QR 스캔 → 홈에서 상품 고르기 → 받는 분 입력하고 선물 ===== */
.d-scene.d-v1[data-m="1"].on{display:block}
.gp{display:grid;grid-template-columns:170px 214px 1fr;gap:26px;align-items:center;min-height:300px}
.gp-left small{display:block;margin-bottom:8px;color:#9a92ad;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:10.5px;font-weight:600}
.gp-phone{position:relative;width:214px;height:300px;border:6px solid #3b3252;border-radius:30px;background:#0f0b1a;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.45)}
.gp-notch{position:absolute;top:0;left:50%;z-index:3;width:70px;height:14px;margin-left:-35px;border-radius:0 0 10px 10px;background:#3b3252}
.gp-scr{position:absolute;inset:0;padding:26px 12px 12px;opacity:0}
.gp-a{animation:gp-a 6.8s both}.gp-b{animation:gp-b 6.8s both}.gp-c{animation:gp-c 6.8s both}
@keyframes gp-a{0%,24%{opacity:1}30%,100%{opacity:0}}
@keyframes gp-b{0%,24%{opacity:0}30%,56%{opacity:1}62%,100%{opacity:0}}
@keyframes gp-c{0%,56%{opacity:0}62%,100%{opacity:1}}
.gp-cam{display:grid;place-items:center;height:190px;border-radius:14px;background:linear-gradient(160deg,#2a2438,#15111f)}
.gp-frame{position:relative;display:grid;place-items:center;width:110px;height:110px;border:2px solid #a78bfa;border-radius:10px}
.gp-frame .sc-qr{width:70px;height:70px}
.gp-line{position:absolute;left:4px;right:4px;top:6px;height:2px;background:#a78bfa;box-shadow:0 0 10px #a78bfa;animation:gp-scan 1.1s linear .3s 1 both}
@keyframes gp-scan{0%{top:6px}100%{top:calc(100% - 8px)}}
.gp-a p{margin:12px 0 0;color:#cdc6da;font-size:12px;font-weight:700;text-align:center}
.gp-open{margin-top:10px;padding:9px 8px;border-radius:10px;background:#7634CB;color:#fff;font-size:10.5px;font-weight:800;text-align:center;opacity:0;transform:translateY(8px);animation:gp-pop .4s ease 1.4s both}
@keyframes gp-pop{to{opacity:1;transform:none}}
.gp-head{padding:0 2px 10px;color:#f2eff8;font-size:13px;font-weight:900}.gp-head small{margin-left:4px;color:#a78bfa;font-size:11px}
.gp-list{display:flex;flex-direction:column;gap:8px}
.gp-row{display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:center;padding:6px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.04)}
.gp-row img{width:44px;height:44px;border-radius:7px;object-fit:cover}
.gp-row b{display:block;color:#f2eff8;font-size:10.5px;line-height:1.3;font-weight:800}
.gp-row em{display:block;margin-top:2px;color:#cdc6da;font-size:10px;font-style:normal}
.gp-row u{padding:5px 9px;border-radius:7px;background:#2b2540;color:#fff;font-size:10px;font-weight:800;text-decoration:none}
.gp-row.sel{animation:gp-sel .5s ease 3.4s both}
@keyframes gp-sel{to{border-color:#a78bfa;background:rgba(124,77,255,.22)}}
.gp-row.sel u{animation:gp-btn .5s ease 3.4s both}
@keyframes gp-btn{to{background:#7634CB}}
.gp-tap{position:absolute;left:176px;top:96px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.55);opacity:0;transform:scale(.4);animation:gp-ripple .7s ease 3.2s 1 both}
@keyframes gp-ripple{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.8)}}
.gp-mini{display:grid;grid-template-columns:40px 1fr;gap:8px;align-items:center;margin-bottom:10px;padding:6px;border-radius:10px;background:rgba(255,255,255,.06)}
.gp-mini img{width:40px;height:40px;border-radius:7px;object-fit:cover}
.gp-mini b{display:block;color:#f2eff8;font-size:10px;line-height:1.3}.gp-mini em{color:#cdc6da;font-size:10px;font-style:normal}
.gp-fld{margin-bottom:8px;padding:7px 9px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.04)}
.gp-fld small{display:block;color:#9a92ad;font-size:9px}.gp-fld b{display:block;min-height:16px;color:#f2eff8;font-size:12px}
.gp-ty{display:inline-block;opacity:0;animation:gp-pop .3s ease both;animation-delay:var(--t)}
.gp-send{padding:9px;border-radius:9px;background:#7634CB;color:#fff;font-size:12px;font-weight:800;text-align:center;animation:gp-press .5s ease 5.6s both}
@keyframes gp-press{0%{transform:none}40%{transform:scale(.95)}100%{transform:none;background:#3aa56a}}
.gp-done{margin-top:8px;padding:8px;border-radius:9px;border:1px solid rgba(61,220,155,.5);background:rgba(61,220,155,.1);color:#9be8c8;font-size:11px;font-weight:800;text-align:center;opacity:0;animation:gp-pop .4s ease 6.1s both}
.gp-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.gp-steps li{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.03);color:#9a92ad;font-size:13.5px;font-weight:800}
.gp-steps i{display:grid;place-items:center;flex:0 0 22px;height:22px;border-radius:50%;background:rgba(255,255,255,.1);font-size:11px;font-style:normal}
.gp-steps .s1{animation:gp-s1 6.8s both}.gp-steps .s2{animation:gp-s2 6.8s both}.gp-steps .s3{animation:gp-s3 6.8s both}
@keyframes gp-s1{0%,24%{color:#fff;border-color:#a78bfa;background:rgba(124,77,255,.2)}30%,100%{color:#9a92ad;border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.03)}}
@keyframes gp-s2{0%,24%{color:#9a92ad}30%,56%{color:#fff;border-color:#a78bfa;background:rgba(124,77,255,.2)}62%,100%{color:#9a92ad;border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.03)}}
@keyframes gp-s3{0%,56%{color:#9a92ad}62%,100%{color:#fff;border-color:#a78bfa;background:rgba(124,77,255,.2)}}
@media(max-width:900px){.gp{grid-template-columns:1fr;justify-items:center}.gp-steps{width:100%}.gp-left{width:170px}}
@media(prefers-reduced-motion:reduce){.gp *{animation:none!important}.gp-a,.gp-b{opacity:0}.gp-c{opacity:1}.gp-open,.gp-ty,.gp-done{opacity:1}}
/* 폰 화면 전환은 짧게(겹쳐 보이지 않게), 폰을 조금 키워 전송 완료 문구까지 보이게 */
@keyframes gp-a{0%,24%{opacity:1}25%,100%{opacity:0}}
@keyframes gp-b{0%,24%{opacity:0}26%,56%{opacity:1}57%,100%{opacity:0}}
@keyframes gp-c{0%,56%{opacity:0}58%,100%{opacity:1}}
.gp{min-height:340px}
.gp-phone{height:336px}
.gp-mini{margin-bottom:8px}.gp-fld{margin-bottom:6px;padding:6px 9px}
.gp-send{padding:8px}.gp-done{margin-top:6px;padding:7px}
/* 매장 선물하기: 폰 화면을 크게(1.28배), 오른쪽 단계 목록은 작게 */
.gp{grid-template-columns:150px 274px 1fr;gap:16px;min-height:430px}
.gp-phone{zoom:1.28}
.gp-left small{font-size:10px}
.tq-card strong{font-size:10px}
.gp-steps{gap:8px}
.gp-steps li{gap:7px;padding:8px 9px;border-radius:10px;font-size:11.5px;line-height:1.3}
.gp-steps i{flex:0 0 18px;height:18px;font-size:10px}
@media(max-width:900px){.gp{grid-template-columns:1fr;min-height:0}.gp-phone{zoom:1.1}.gp-steps li{font-size:12.5px}}
/* 오른쪽 화면 카드 크기 고정 (단계·방식이 바뀌어도 높이가 변하지 않음) */
@media(min-width:901px){
  .dj-screen{height:692px;display:flex;flex-direction:column}
  .dj-body{flex:1 1 auto;min-height:0;overflow:hidden}
  .dj-view.on{height:100%}
}
/* 카드 높이를 줄이고(692→600) 장면은 카드 안에서 세로 가운데에, 작은 장면은 조금 키워 카드에 맞춤 */
@media(min-width:901px){
  .dj-screen{height:600px}
  .dj-view.on{display:flex;flex-direction:column}
  .dj-scenes{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
  .d-scene.on{width:100%;min-height:0;zoom:1.14}
  .d-scene.on.d-v0,.d-scene.on.d-v1[data-m="0"],.d-scene.on.d-v1[data-m="2"]{align-self:center}
  .d-scene.d-v1[data-m="1"].on{zoom:1}
  .gp{min-height:0;gap:14px}
  .gp-phone{zoom:1.08}
}
/* 마무리 보정: 자사몰은 카드 안에 들어오게 약간 줄이고, 직접 발송(이전 장면)은 원래 가로 배치로 */
@media(min-width:901px){
  .d-scene.d-v0[data-m="1"].on{zoom:.9}
  .d-scene.on{zoom:1.08}
}
.d-scene.d-v1[data-m="2"].on{display:flex;align-items:center;justify-content:flex-start;gap:14px;min-height:0}
.d-scene.d-v1[data-m="2"] .d-voucher{flex:0 0 150px;width:150px}
/* 매장 선물하기: 폰 전체가 아니라 윗부분만 크게 (아래는 카드 밖으로 잘림) — 답답하지 않게 */
@media(min-width:901px){
  .dj-scenes:has(.gp){align-items:flex-start}
  .d-scene.d-v1[data-m="1"].on{zoom:1;align-self:flex-start;height:auto}
  .gp{grid-template-columns:150px 290px 1fr;gap:18px;align-items:start;min-height:0;margin-top:2px}
  .gp-phone{zoom:1.3;height:360px;border-bottom-width:0;border-radius:30px 30px 0 0}
  .gp-left{margin-top:44px}
  .gp-steps{margin-top:44px}
  .gp-scr{padding:24px 12px 8px}
  .gp-c .gp-mini{margin-bottom:8px}
  .gp-c .gp-fld{margin-bottom:6px}
}
/* 폰 안쪽 요소를 작게 (잘리는 것 없이 모두 보이게) */
@media(min-width:901px){
  .gp-scr{zoom:.86}
  .gp-c .gp-mini img{width:34px;height:34px}
  .gp-c .gp-mini{grid-template-columns:34px 1fr;padding:5px 6px;margin-bottom:6px}
  .gp-c .gp-fld{padding:5px 8px;margin-bottom:5px}
  .gp-send{padding:7px}
  .gp-done{margin-top:5px;padding:6px}
}
/* 선물 보내기를 누르면 종이비행기가 날아가며 선물이 전달되는 느낌 (전송 완료 문구 대신) */
.gp-done{display:none!important}
.gp-fly{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.gp-plane{position:absolute;left:46%;top:196px;width:34px;height:26px;background:linear-gradient(135deg,#d9ccff,#a78bfa 60%,#7634CB);clip-path:polygon(0 42%,100% 0,62% 100%,46% 62%);filter:drop-shadow(0 6px 10px rgba(167,139,250,.6));opacity:0;animation:gp-fly 1.4s cubic-bezier(.4,.1,.6,1) 5.9s both}
@keyframes gp-fly{0%{opacity:0;transform:translate(0,0) rotate(-10deg) scale(.9)}12%{opacity:1}100%{opacity:0;transform:translate(120px,-230px) rotate(-28deg) scale(.55)}}
.gp-trail{position:absolute;left:calc(46% + 10px);top:214px;width:3px;height:0;border-radius:2px;background:linear-gradient(to top,rgba(167,139,250,0),rgba(167,139,250,.7));transform-origin:bottom;transform:rotate(27deg);opacity:0;animation:gp-trail 1.4s ease 6.0s both}
@keyframes gp-trail{0%{opacity:0;height:0}30%{opacity:1;height:60px}100%{opacity:0;height:130px}}
@media(prefers-reduced-motion:reduce){.gp-plane,.gp-trail{display:none}}
/* 종이비행기 v2: 선물 보내기를 누르면 입력 화면이 사라지고, 빈 화면 위로 비행기가 크게 날아감 */
.gp-c>*{animation-name:gp-hide;animation-duration:.5s;animation-delay:6s;animation-fill-mode:both}
.gp-c .gp-ty{animation:gp-pop .3s ease both,gp-hide .5s ease 6s both;animation-delay:var(--t),6s}
.gp-c .gp-send{animation:gp-press .5s ease 5.6s both,gp-hide .5s ease 6.1s both}
@keyframes gp-hide{to{opacity:0}}
.gp-trail{display:none!important}
.gp-plane{left:14%;top:64%;width:58px;height:44px;clip-path:polygon(0 44%,100% 0,64% 100%,48% 62%);animation:gp-fly2 1.5s cubic-bezier(.35,.05,.55,1) 6.25s both}
@keyframes gp-fly2{0%{opacity:0;transform:translate(0,0) rotate(-8deg) scale(.7)}12%{opacity:1}50%{transform:translate(70px,-70px) rotate(-26deg) scale(1)}100%{opacity:0;transform:translate(190px,-250px) rotate(-38deg) scale(.7)}}
/* 비행기가 날아간 뒤 "발송되었어요" */
.gp-sent{position:absolute;left:50%;top:46%;z-index:5;transform:translate(-50%,-50%) scale(.9);padding:10px 20px;border-radius:999px;background:#7634CB;color:#fff;font-size:14px;font-weight:800;white-space:nowrap;box-shadow:0 10px 24px rgba(118,52,203,.5);opacity:0;animation:gp-sent .5s cubic-bezier(.2,.8,.2,1) 7.1s both}
@keyframes gp-sent{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){.gp-sent{opacity:1;animation:none}}
/* 종이비행기: 직접 만든 3D 아이콘 사용 */
.gp-plane{width:84px;height:auto;clip-path:none;background:none;filter:drop-shadow(0 10px 14px rgba(118,52,203,.45));object-fit:contain}
@keyframes gp-fly2{0%{opacity:0;transform:translate(0,12px) rotate(8deg) scale(.6)}15%{opacity:1}50%{transform:translate(80px,-70px) rotate(-4deg) scale(1)}100%{opacity:0;transform:translate(200px,-250px) rotate(-14deg) scale(.6)}}
/* ===== 매장 선물하기 타임라인 재조정(총 11초): 스캔 → 페이지로 이동 중(로딩) → 상품 고르기 → 입력 → 비행기 → 발송 ===== */
.gp-a{animation:gp-a2 11s both!important}.gp-b{animation:gp-b2 11s both!important}.gp-c{animation:gp-c2 11s both!important}
@keyframes gp-a2{0%,31.8%{opacity:1}32.7%,100%{opacity:0}}
@keyframes gp-b2{0%,33%{opacity:0}33.6%,53.6%{opacity:1}54.5%,100%{opacity:0}}
@keyframes gp-c2{0%,54%{opacity:0}54.6%,100%{opacity:1}}
.gp-line{animation-delay:.4s!important;animation-duration:1.2s!important}
.gp-open{animation-delay:1.8s!important}
.gp-load{position:absolute;left:12px;right:12px;bottom:22px;padding:10px 12px;border-radius:12px;background:rgba(15,11,26,.92);border:1px solid rgba(167,139,250,.5);opacity:0;animation:gp-pop .4s ease 2.5s both}
.gp-load span{display:block;margin-bottom:8px;color:#e6e0f2;font-size:11px;font-weight:800;text-align:center}
.gp-load b{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.gp-load i{display:block;height:100%;width:100%;border-radius:3px;background:linear-gradient(90deg,#a78bfa,#7634CB);transform:scaleX(0);transform-origin:left;animation:gp-bar 1s ease 2.7s both}
@keyframes gp-bar{to{transform:scaleX(1)}}
.gp-tap{animation-delay:5.0s!important}
.gp-row.sel,.gp-row.sel u{animation-delay:5.2s!important}
.gp-steps .s1{animation:gp-s1b 11s both!important}.gp-steps .s2{animation:gp-s2b 11s both!important}.gp-steps .s3{animation:gp-s3b 11s both!important}
@keyframes gp-s1b{0%,31.8%{color:#fff;border-color:#a78bfa;background:rgba(124,77,255,.2)}32.7%,100%{color:#9a92ad;border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.03)}}
@keyframes gp-s2b{0%,33%{color:#9a92ad}33.6%,53.6%{color:#fff;border-color:#a78bfa;background:rgba(124,77,255,.2)}54.5%,100%{color:#9a92ad;border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.03)}}
@keyframes gp-s3b{0%,54%{color:#9a92ad}54.6%,100%{color:#fff;border-color:#a78bfa;background:rgba(124,77,255,.2)}}
.gp-c>*{animation-delay:8.1s!important}
.gp-c .gp-ty{animation-delay:var(--t),8.1s!important}
.gp-c .gp-send{animation:gp-press .5s ease 7.7s both,gp-hide .5s ease 8.2s both!important}
.gp-plane{animation-delay:8.4s!important}
.gp-sent{animation-delay:9.7s!important}
/* ===== 직접 발송: 사업자(서비스 담당자)가 고객 목록(CRM)에서 대상을 골라 재방문 메시지와 상품권을 보냄 ===== */
.d-scene.d-v1[data-m="2"].on{display:block}
.dm-use{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px}
.dm-use small{margin-right:4px;color:#9a92ad;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:10px;font-weight:600}
.dm-use i{padding:4px 10px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#cdc6da;font-size:10.5px;font-style:normal;font-weight:700}
.dm-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:12px;align-items:start}
.dm-card{padding:12px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.04)}
.dm-card>small{display:block;margin-bottom:8px;color:#9a92ad;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:10px;font-weight:600}
.dm-head,.dm-r{display:grid;grid-template-columns:18px 1fr 62px 78px;gap:8px;align-items:center;padding:7px 4px}
.dm-head{color:#6f6785;font-size:9.5px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.1)}
.dm-r{border-bottom:1px solid rgba(255,255,255,.06);border-radius:6px;font-size:11.5px}
.dm-r b{color:#f2eff8;font-weight:800}.dm-r span{color:#9a92ad;font-size:10.5px}
.dm-ck{width:14px;height:14px;border:1.5px solid rgba(255,255,255,.3);border-radius:4px}
.dm-r.sel .dm-ck{animation:dm-ck .3s ease both;animation-delay:var(--t)}
@keyframes dm-ck{to{background:#7634CB;border-color:#7634CB;box-shadow:inset 0 0 0 2px #15121f}}
.dm-r.sel{animation:dm-row .4s ease both;animation-delay:var(--t)}
@keyframes dm-row{to{background:rgba(124,77,255,.16)}}
.dm-tag{position:relative;display:block;height:20px;font-style:normal}
.dm-tag u{position:absolute;left:0;top:0;padding:3px 8px;border-radius:999px;font-size:9.5px;font-weight:800;text-decoration:none;white-space:nowrap}
.dm-tag .t0{background:rgba(255,160,90,.18);color:#ffb482;opacity:0;animation:dm-in .3s ease both,dm-out .3s ease both;animation-delay:var(--t),var(--u)}
.dm-tag .t1{background:#7634CB;color:#fff;opacity:0;animation:dm-in .4s ease both;animation-delay:var(--u)}
@keyframes dm-in{to{opacity:1}}@keyframes dm-out{to{opacity:0}}
.dm-r:not(.sel) .dm-tag{background:none}
.dm-prod{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;padding:8px;border-radius:10px;background:rgba(255,255,255,.05)}
.dm-prod img{width:44px;height:44px;border-radius:7px;object-fit:cover}
.dm-prod b{display:block;color:#f2eff8;font-size:11px;line-height:1.3}.dm-prod em{color:#cdc6da;font-size:10.5px;font-style:normal}
.dm-msg{margin-top:10px;padding:9px 10px;border:1px solid rgba(255,255,255,.16);border-radius:10px}
.dm-msg small{display:block;margin-bottom:4px;color:#9a92ad;font-size:9.5px}
.dm-msg p{margin:0;min-height:34px;color:#f2eff8;font-size:11.5px;line-height:1.5}
.dm-ty{display:inline-block;opacity:0;animation:dm-in .4s ease both;animation-delay:var(--t)}
.dm-btn{margin-top:10px;padding:9px;border-radius:9px;background:#7634CB;color:#fff;font-size:12px;font-weight:800;text-align:center;animation:lf-press .5s ease both;animation-delay:var(--t)}
@media(max-width:900px){.dm-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.dm *{animation:none!important}.dm-tag .t1,.dm-ty{opacity:1}.dm-tag .t0{opacity:0}}
/* 매장 선물하기 배치: 왼쪽 = 테이블 QR 카드 + 그 아래 단계 목록, 오른쪽 = 폰. 좌우 간격을 넓히고 가운데로 모음 */
@media(min-width:901px){
  .gp{grid-template-columns:168px 290px;gap:44px;justify-content:center;align-items:start}
  .gp-left{margin-top:20px}
  .gp-steps{margin-top:18px;gap:7px}
  .gp-steps li{font-size:11.5px;padding:8px 10px}
}
@media(max-width:900px){.gp-left{width:100%;max-width:280px}.gp-steps{margin-top:14px}}
/* 비행기 시작 위치를 위로 (폰 화면 가운데 근처에서 출발) */
.gp-plane{left:12%;top:46%}
@keyframes gp-fly2{0%{opacity:0;transform:translate(0,10px) rotate(8deg) scale(.6)}15%{opacity:1}50%{transform:translate(70px,-50px) rotate(-4deg) scale(1)}100%{opacity:0;transform:translate(180px,-170px) rotate(-14deg) scale(.6)}}
@media(min-width:901px){.gp-left{margin-top:4px}.gp-steps{margin-top:12px;gap:6px}.gp-steps li{padding:7px 10px}.tq-qr{width:68px;height:68px}.tq-qr .sc-qr{width:48px;height:48px}}
/* 발송 완료는 부드럽게: 비행기가 지나간 뒤 체크 표시 + 작은 "발송되었어요" 글자 */
.gp-sent{display:flex;flex-direction:column;align-items:center;gap:12px;padding:0;border-radius:0;background:none;box-shadow:none;color:#cdc6da;font-size:13px;font-weight:700}
.gp-check{position:relative;display:block;width:52px;height:52px;border-radius:50%;border:2px solid #a78bfa;background:rgba(124,77,255,.18)}
.gp-check:after{content:"";position:absolute;left:17px;top:11px;width:12px;height:22px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg);transform-origin:center;opacity:0;animation:gp-tick .35s ease 7.4s both}
@keyframes gp-tick{from{opacity:0;transform:rotate(45deg) scale(.4)}to{opacity:1;transform:rotate(45deg) scale(1)}}
.gp-sent span{letter-spacing:-.01em}
.gp-sent{animation-delay:7.3s!important}
/* 타이밍 보정: 비행기(8.4~9.9초)가 지나간 뒤에 체크와 글자가 나타남 */
.gp-sent{animation-delay:9.5s!important}
.gp-check:after{animation-delay:9.85s!important}
/* 직접 발송: 고객 목록 없이, 이름과 번호를 아는 사람에게 직접 입력해서 보냄 */
.dm-head2,.dm-p{display:grid;grid-template-columns:1fr 1.25fr 74px;gap:8px;align-items:center}
.dm-head2{padding:0 2px 6px;color:#6f6785;font-size:9.5px;font-weight:700}
.dm-p{margin-bottom:8px}
.dm-f{display:flex;align-items:center;min-height:34px;padding:0 10px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.04);color:#f2eff8;font-size:12px;font-weight:700;white-space:nowrap}
.dm-add{margin-top:4px;padding:9px;border:1px dashed rgba(255,255,255,.26);border-radius:8px;color:#9a92ad;font-size:11px;font-weight:700;text-align:center}
.dm-p .dm-tag .t1{animation:dm-in .4s ease both;animation-delay:var(--u)}
@media(min-width:901px){.dm-grid{grid-template-columns:1.5fr 1fr}.dm-head2,.dm-p{grid-template-columns:.8fr 1.2fr 66px;gap:6px}.dm-f{padding:0 8px;font-size:11.5px}.dm-tag .t1{padding:3px 7px}}
/* 메시지 없이: 상품권 선택 + 발송 버튼만 */
.dm-prod{padding:12px}
.dm-btn{margin-top:14px;padding:11px}
/* 직접 발송: 한 장짜리 흐름 (상품 선택 → 받는 분 입력[직접/엑셀] → 발송) */
.dm-one{max-width:520px;margin:0 auto;padding:16px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.04)}
.dm-sec{margin-bottom:14px}
.dm-sec>small{display:flex;align-items:center;gap:8px;margin-bottom:8px;color:#cdc6da;font-size:11.5px;font-weight:800}
.dm-sec>small b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#7634CB;color:#fff;font-size:10px}
.dm-sel{position:relative;border:1px solid rgba(167,139,250,.0);animation:dm-pick .4s ease .5s both}
@keyframes dm-pick{to{border-color:#a78bfa;background:rgba(124,77,255,.16)}}
.dm-chev{position:absolute;right:14px;top:50%;width:8px;height:8px;margin-top:-6px;border:solid #9a92ad;border-width:0 2px 2px 0;transform:rotate(45deg)}
.dm-one .dm-head2,.dm-one .dm-p{grid-template-columns:.8fr 1.2fr 70px}
.dm-acts{display:flex;gap:8px;margin-top:2px}
.dm-acts span{flex:1;padding:9px;border:1px dashed rgba(255,255,255,.26);border-radius:8px;color:#9a92ad;font-size:11px;font-weight:700;text-align:center}
.dm-acts .dm-xl{border-style:solid;border-color:rgba(61,220,155,.5);color:#9be8c8;background:rgba(61,220,155,.08);animation:lf-press .6s ease both;animation-delay:var(--t)}
.dm-one .dm-btn{margin-top:4px}
/* 직접 발송 한 장 카드가 위 탭과 겹치지 않게 축소·간격 정리 */
@media(min-width:901px){
  .d-scene.d-v1[data-m="2"].on{zoom:.86}
  .dm-use{margin-bottom:8px}
  .dm-sec{margin-bottom:10px}
  .dm-f{min-height:30px}
  .dm-p{margin-bottom:6px}
}
/* 직접 발송 v3: 발송 완료 뱃지 없음, 엑셀 업로드는 "받는 분 입력" 오른쪽 작은 버튼, 발송하기 → 비행기 → 체크 + 발송되었어요(매장 선물하기와 동일) */
.dm-one{position:relative;overflow:hidden}
.dm-body>*{animation:none}
.dm-body{animation:gp-hide .5s ease 4.8s both}
.dm-rh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dm-rh small{display:flex;align-items:center;gap:8px;color:#cdc6da;font-size:11.5px;font-weight:800}
.dm-rh small b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#7634CB;color:#fff;font-size:10px}
.dm-rh .dm-xl{padding:5px 10px;border:1px solid rgba(61,220,155,.5);border-radius:7px;background:rgba(61,220,155,.08);color:#9be8c8;font-size:10.5px;font-weight:800;animation:lf-press .6s ease both;animation-delay:var(--t)}
.dm-acts span{flex:0 0 auto;padding:7px 14px}
.dm-end{position:absolute;inset:0;pointer-events:none}
.dm-plane{position:absolute;left:14%;top:56%;width:84px;height:auto;opacity:0;filter:drop-shadow(0 10px 14px rgba(118,52,203,.45));animation:dm-fly 1.5s cubic-bezier(.35,.05,.55,1) 5.1s both}
@keyframes dm-fly{0%{opacity:0;transform:translate(0,10px) rotate(8deg) scale(.6)}15%{opacity:1}50%{transform:translate(160px,-60px) rotate(-4deg) scale(1)}100%{opacity:0;transform:translate(380px,-160px) rotate(-14deg) scale(.6)}}
.dm-done{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;gap:12px;color:#cdc6da;font-size:13px;font-weight:700;transform:translate(-50%,-50%);opacity:0;animation:gp-pop .5s ease 6.5s both}
.dm-check:after{animation-delay:6.85s!important}
@media(prefers-reduced-motion:reduce){.dm-body{animation:none}.dm-end{display:none}}
/* 직접 발송 UI 정리 */
@media(min-width:901px){.d-scene.d-v1[data-m="2"].on{zoom:1}}
.dm-use{gap:8px;margin-bottom:12px}
.dm-use small{font-size:12px;margin-right:6px}
.dm-use i{padding:6px 13px;font-size:12.5px}
.dm-one{max-width:none;width:100%;padding:18px 20px}
.dm-one .dm-head2,.dm-one .dm-p{grid-template-columns:.8fr 1.3fr}
.dm-one .dm-p{gap:10px;margin-bottom:8px}
.dm-f{min-height:36px;padding:0 12px;font-size:12.5px}
.dm-acts{margin-top:2px}
.dm-sec{margin-bottom:14px}
.dm-prod{padding:12px 14px}
.dm-prod b{font-size:12.5px}.dm-prod em{font-size:11.5px}
.dm-btn{padding:12px;font-size:13.5px}
.dm-done{transform:translate(-50%,-50%);animation:dm-pop2 .5s ease 6.5s both}
@keyframes dm-pop2{from{opacity:0;transform:translate(-50%,-44%)}to{opacity:1;transform:translate(-50%,-50%)}}
.dm-done span{font-size:14px}
/* 높이 정리: 카드 안 세로 여백을 줄여 탭과 겹치지 않게 */
.dm-use{margin-bottom:10px}
.dm-use i{padding:5px 12px}
.dm-one{padding:14px 18px}
.dm-sec{margin-bottom:10px}
.dm-sec>small,.dm-rh small{margin-bottom:6px}
.dm-prod{padding:8px 12px}
.dm-prod img{width:38px;height:38px}
.dm-f{min-height:32px}
.dm-one .dm-p{margin-bottom:6px}
.dm-acts span{padding:6px 14px}
.dm-btn{padding:10px}
/* ===== 종이비행기 v3: 부드러운 곡선 경로로 날아가 화면 모서리 밖으로 빠져나감 (회전 흔들림·갑자기 사라짐 없음) ===== */
.dm-plane,.gp-plane{offset-rotate:auto 28deg;transform:none;width:78px;filter:drop-shadow(0 12px 16px rgba(118,52,203,.4))}
.dm-plane{left:44%;top:78%;offset-path:path("M 0 0 C 40 -30, 150 -80, 330 -330");offset-distance:0%;animation:plane-go 1.5s cubic-bezier(.5,0,.3,1) 5.1s both}
.gp-plane{left:36%;top:64%;offset-path:path("M 0 0 C 30 -30, 90 -80, 210 -320");offset-distance:0%;animation:plane-go 1.5s cubic-bezier(.5,0,.3,1) 8.4s both!important}
@keyframes plane-go{0%{offset-distance:0%;opacity:0}10%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){.dm-plane,.gp-plane{display:none}}
/* 직접 발송: 엑셀 업로드 버튼은 효과 없이 고정 표시 */
.dm-rh .dm-xl,.dm-acts .dm-xl{animation:none!important}
/* 비행기 삭제: 보내기 → 입력 화면이 사라지고 → 바로 체크 + "발송되었어요" */
.gp-fly,.dm-plane,.gp-plane{display:none!important}
.gp-sent{animation-delay:8.5s!important}
.gp-check:after{animation-delay:8.85s!important}
.dm-done{animation-delay:5.2s!important}
.dm-check:after{animation-delay:5.55s!important}
/* ===== 사용 단계: ① 파트너센터 앱(카메라 스캔 → 번호 자동입력 → 사용 승인) ② POS(바코드 리더기 → 확인 팝업 → 사용) ③ 온라인(상품권 번호 입력 → 확인 → 결제) ===== */
.d-scene.d-v2.on{display:block;zoom:1!important;min-height:0}
.us-v{padding:12px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.05);text-align:center}
.us-v small{display:block;margin-bottom:8px;color:#9a92ad;font-size:10.5px;font-weight:700}
.us-v img{display:block;width:100%;height:70px;object-fit:cover;border-radius:7px;margin-bottom:8px}
.us-v b{display:block;color:#f2eff8;font-size:11.5px;font-weight:800;line-height:1.3;margin-bottom:8px}
.us-bc{height:30px;border-radius:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.88) 0 2px,transparent 2px 4px,rgba(255,255,255,.88) 4px 5px,transparent 5px 8px,rgba(255,255,255,.88) 8px 11px,transparent 11px 13px)}
.us-v em{display:block;margin-top:6px;color:#9a92ad;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:9px;font-style:normal;letter-spacing:.02em;white-space:nowrap}
.us-app{display:grid;grid-template-columns:190px 232px;gap:44px;justify-content:center;align-items:center}
.us-phone{position:relative;width:232px;height:380px;border:6px solid #3b3252;border-radius:30px;background:#0f0b1a;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.45)}
.us-notch{position:absolute;top:0;left:50%;z-index:3;width:70px;height:14px;margin-left:-35px;border-radius:0 0 10px 10px;background:#3b3252}
.us-sc{position:absolute;inset:0;padding:28px 14px 14px;opacity:0}
.us-s1{animation:us-a 8.8s both}.us-s2{animation:us-b 8.8s both}.us-s3{animation:us-c 8.8s both}
@keyframes us-a{0%,22%{opacity:1}24%,100%{opacity:0}}
@keyframes us-b{0%,25%{opacity:0}27%,50%{opacity:1}52%,100%{opacity:0}}
@keyframes us-c{0%,53%{opacity:0}55%,85%{opacity:1}87%,100%{opacity:0}}
.us-head{padding-bottom:10px;color:#f2eff8;font-size:14px;font-weight:900}
.us-hello{margin-bottom:14px;color:#9a92ad;font-size:12px}
.us-bigbtn{padding:16px;border-radius:14px;background:#7634CB;color:#fff;font-size:15px;font-weight:900;text-align:center;box-shadow:0 10px 24px rgba(118,52,203,.4)}
.us-tap{position:absolute;left:50%;top:128px;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:rgba(255,255,255,.55);opacity:0;animation:gp-ripple .7s ease both;animation-delay:var(--t)}
.us-cam{display:grid;place-items:center;height:250px;border-radius:16px;background:linear-gradient(160deg,#241f31,#120e1c)}
.us-frame{position:relative;display:block;width:170px;height:96px;border:2px solid #a78bfa;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.04)}
.us-bc2{position:absolute;left:14px;right:14px;top:22px;height:52px;border-radius:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.9) 0 2px,transparent 2px 4px,rgba(255,255,255,.9) 4px 5px,transparent 5px 8px,rgba(255,255,255,.9) 8px 11px,transparent 11px 13px)}
.us-line{position:absolute;left:4px;right:4px;top:6px;height:2px;background:#a78bfa;box-shadow:0 0 10px #a78bfa;animation:gp-scan 1.1s linear 2.6s both}
.us-s2 p{margin:12px 0 0;color:#cdc6da;font-size:12.5px;font-weight:700;text-align:center}
.us-fld{margin-bottom:10px;padding:9px 11px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.05)}
.us-fld small{display:block;margin-bottom:3px;color:#9a92ad;font-size:10px}
.us-fld b{display:block;min-height:18px;color:#f2eff8;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:10.5px;white-space:nowrap}
.us-ty{display:inline-block;opacity:0;animation:gp-pop .4s ease both;animation-delay:var(--t)}
.us-prod{display:grid;grid-template-columns:40px 1fr;gap:8px;align-items:center;margin-bottom:14px;padding:8px;border-radius:10px;background:rgba(255,255,255,.06)}
.us-prod img{width:40px;height:40px;border-radius:7px;object-fit:cover}
.us-prod b{display:block;color:#f2eff8;font-size:11px;line-height:1.3}.us-prod em{color:#9be8c8;font-size:10.5px;font-style:normal;font-weight:700}
.us-ok{padding:13px;border-radius:12px;background:#7634CB;color:#fff;font-size:14px;font-weight:900;text-align:center;opacity:0;transform:translateY(8px);animation:gp-pop .4s ease 5.9s both,gp-press .5s ease 6.9s both}
.us-done{position:absolute;left:50%;top:50%;z-index:4;display:flex;flex-direction:column;align-items:center;gap:12px;color:#cdc6da;font-size:14px;font-weight:700;transform:translate(-50%,-50%);opacity:0;animation:dm-pop2 .5s ease 7.9s both}
.us-check:after{animation-delay:8.25s!important}
/* POS */
.us-pos{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center}
.ps{position:relative;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:#15121f;overflow:hidden;min-height:330px;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.ps-top{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;background:#2a2538;border-bottom:1px solid rgba(255,255,255,.12)}
.ps-top b{color:#f2eff8;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.06em}.ps-top span{color:#9a92ad;font-size:11px}
.ps-total{padding:16px 14px 6px}.ps-total small{display:block;color:#9a92ad;font-size:11px}.ps-total b{color:#fff;font-size:26px;font-weight:900}
.ps-pay{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 14px}
.ps-pay span{padding:14px 8px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.05);color:#cdc6da;font-size:12.5px;font-weight:800;text-align:center}
.ps-pay .ps-sel{animation:ps-sel .4s ease 1s both}
@keyframes ps-sel{to{border-color:#a78bfa;background:rgba(124,77,255,.28);color:#fff}}
.ps-pop{position:absolute;left:50%;top:50%;z-index:3;width:230px;padding:16px;border:1px solid rgba(255,255,255,.22);border-radius:14px;background:#241f31;box-shadow:0 20px 50px rgba(0,0,0,.6);text-align:center;transform:translate(-50%,-46%) scale(.94);opacity:0;animation:ps-pop 5.9s ease 3.4s both}
@keyframes ps-pop{0%{opacity:0;transform:translate(-50%,-46%) scale(.94)}6%,88%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
.ps-pop b{display:block;color:#f2eff8;font-size:13px;font-weight:900}.ps-pop p{margin:6px 0 14px;color:#cdc6da;font-size:12px}
.ps-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ps-btns span{padding:10px;border-radius:9px;background:rgba(255,255,255,.1);color:#cdc6da;font-size:12.5px;font-weight:800}
.ps-btns .ps-use{background:#7634CB;color:#fff;animation:gp-press .5s ease 5.0s both}
.ps-pop{animation-duration:2.5s}
.ps-done{position:absolute;left:50%;top:56%;z-index:4;display:flex;flex-direction:column;align-items:center;gap:12px;color:#cdc6da;font-size:14px;font-weight:700;transform:translate(-50%,-50%);opacity:0;animation:dm-pop2 .5s ease 6.0s both}
.rd{display:flex;flex-direction:column;align-items:center;gap:14px}
.rd-card{position:relative;width:190px}
.rd-laser{position:absolute;left:-6px;right:-6px;top:62%;height:2px;background:#ff5a5a;box-shadow:0 0 12px #ff5a5a;opacity:0;animation:rd-sweep 1.1s ease-in-out 2.2s both}
@keyframes rd-sweep{0%{opacity:0;transform:translateY(-16px)}20%,80%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
.rd-gun{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.04);color:#9a92ad;font-size:11px;font-weight:700}
.rd-gun i{width:22px;height:14px;border-radius:4px;background:linear-gradient(90deg,#3b3252,#6b5c96)}
/* 온라인 */
.us-web{max-width:560px;margin:0 auto}
.wb{display:grid;grid-template-columns:1fr 1.1fr;gap:16px;padding:16px;background:#fff;color:#1e1b26}
.wb small{display:block;margin-bottom:8px;color:#8b8499;font-size:10.5px;font-weight:800}
.wb-it{display:grid;grid-template-columns:54px 1fr;gap:10px;align-items:center;padding:8px;border:1px solid #e6e2ee;border-radius:10px}
.wb-it img{width:54px;height:54px;border-radius:8px;object-fit:cover}
.wb-it b{display:block;color:#1e1b26;font-size:12px;line-height:1.3}.wb-it em{color:#7634CB;font-size:12px;font-style:normal;font-weight:800}
.wb-m{display:flex;gap:6px;margin-bottom:10px}
.wb-m span{flex:1;padding:8px;border:1px solid #e6e2ee;border-radius:8px;color:#6b6580;font-size:11.5px;font-weight:800;text-align:center}
.wb-m .on{border-color:#7634CB;background:#f3edfc;color:#5c24a5}
.wb-in{margin-bottom:10px;padding:8px 10px;border:1px solid #cfc8de;border-radius:8px}
.wb-in small{margin-bottom:2px}.wb-in b{display:block;min-height:18px;color:#1e1b26;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11px;white-space:nowrap}
.wb-ty{display:inline-block;opacity:0;animation:gp-pop .5s ease both;animation-delay:var(--t)}
.wb-btn{padding:11px;border-radius:9px;background:#2b2540;color:#fff;font-size:13px;font-weight:800;text-align:center;animation:wb-press .6s ease both;animation-delay:var(--t)}
@keyframes wb-press{0%{transform:none}40%{transform:scale(.95)}100%{transform:none;background:#7634CB}}
.wb-ok{margin-top:10px;padding:9px;border-radius:8px;border:1px solid rgba(58,165,106,.5);background:rgba(58,165,106,.12);color:#2b8a57;font-size:12px;font-weight:800;text-align:center;opacity:0;animation:gp-pop .4s ease both;animation-delay:var(--t)}
@media(max-width:900px){.us-app,.us-pos{grid-template-columns:1fr;justify-items:center}.wb{grid-template-columns:1fr}.rd{order:-1}}
@media(prefers-reduced-motion:reduce){.us-app *,.us-pos *,.us-web *{animation:none!important}.us-s1,.us-s2{opacity:0}.us-s3,.us-ok,.us-ty,.wb-ty,.wb-ok{opacity:1}.ps-pop,.us-done,.ps-done{opacity:0}}
/* 사용: 앱 폰은 윗부분만 크게(아래는 잘림), 사용 완료 화면에 내용 추가, POS의 리더기 카드 삭제 */
@media(min-width:901px){
  .us-app{grid-template-columns:190px 252px;gap:40px;align-items:start;margin-top:6px}
  .us-phone{width:252px;height:360px;border-bottom-width:0;border-radius:30px 30px 0 0}
  .us-v0{margin-top:30px}
}
.us-sc{padding:30px 14px 8px}
.us-cam{height:240px}
.us-done,.ps-done{align-items:center;gap:10px}
.us-dt{color:#f2eff8;font-size:15px;font-weight:800}
.us-sum{margin:6px 0 0;padding:0;list-style:none;width:190px;border-top:1px dashed rgba(255,255,255,.2)}
.us-sum li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:10.5px}
.us-sum span{flex:0 0 auto;color:#9a92ad}
.us-sum b{color:#e6e0f2;font-weight:700;text-align:right;white-space:nowrap}
.ps-done{top:58%}
.ps-done .us-sum{width:250px}
.ps-done .us-sum li{font-size:11.5px}
.ps-done .us-sum b{font-size:11.5px}
.rd{justify-content:center}
/* 사용 완료는 아래 화면을 덮는 별도 화면으로 */
.ps-done{inset:0;left:0;top:0;transform:none;justify-content:center;background:#15121f;animation-delay:6.0s}
.ps-done .us-check:after{animation-delay:6.35s!important}
.us-web .lf-site{position:relative}
.wb-end{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#15121f;color:#f2eff8;font-size:15px;font-weight:800;opacity:0;animation:dm-pop2 .5s ease 4.2s both}
.wb-end .us-check:after{animation-delay:4.55s!important}
/* 완료 화면: transform 키프레임 충돌 없이 페이드만 */
@keyframes ov-in{from{opacity:0}to{opacity:1}}
.ps-done{animation:ov-in .5s ease 6.0s both!important}
.wb-end{animation:ov-in .5s ease 4.2s both!important}
/* 포스기 단말 느낌 */
.posm{display:flex;flex-direction:column;align-items:center}
.posm .ps{width:100%;min-height:0;height:300px;border:7px solid #0c0a12;border-radius:16px 16px 10px 10px;background:#15121f;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 14px 28px rgba(0,0,0,.45)}
.posm-stand{width:34%;height:16px;background:linear-gradient(#2a2538,#1b1727);clip-path:polygon(12% 0,88% 0,100% 100%,0 100%)}
.posm-stand:after{content:"";display:block}
.ps-main{display:grid;grid-template-columns:1.15fr 1fr;height:calc(100% - 30px - 38px)}
.ps-ord{padding:10px 12px;border-right:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column}
.ps-oh,.ps-oi{display:grid;grid-template-columns:1fr 30px 56px;gap:6px;font-size:10.5px}
.ps-oh{padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.14);color:#9a92ad}
.ps-oi{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08);color:#e6e0f2;font-weight:700}.ps-oi b{text-align:right}
.ps-os{margin-top:auto;display:flex;justify-content:space-between;padding-top:8px;border-top:1px solid rgba(255,255,255,.14);color:#cdc6da;font-size:11px}.ps-os b{color:#fff;font-size:13px}
.ps-side .ps-total{padding:10px 12px 0}.ps-side .ps-total b{font-size:22px}
.ps-side .ps-pay{padding:8px 12px;gap:6px}.ps-side .ps-pay span{padding:12px 4px;font-size:11px}
.ps-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08);border-top:1px solid rgba(255,255,255,.12);height:38px}
.ps-bar i{display:flex;align-items:center;justify-content:center;background:#201b2e;color:#9a92ad;font-size:10.5px;font-style:normal;font-weight:700}
.ps-done .us-sum{width:230px}
.us-pos{grid-template-columns:1.5fr .6fr;gap:16px}
.ps-main{grid-template-columns:1.2fr 1fr}
.ps-oh,.ps-oi{grid-template-columns:1fr 22px 48px;gap:4px}
.ps-oi span:first-child{font-size:10px;line-height:1.35}
.rd-card{width:168px}
/* 간편 등록 완료: 별도 화면 */
.lf-reg{position:relative}
.reg-end{position:absolute;inset:-6px;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#15121f;color:#f2eff8;font-size:15px;font-weight:800;opacity:0;animation:ov-in .5s ease 4.6s both}
.reg-end .us-check:after{animation-delay:4.95s!important}
/* 정산: 채널별 사용 완료분 */
.d-set.st{justify-content:flex-start;gap:9px;padding:14px 18px}
.st-h{margin-top:2px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.12);color:#9a92ad;font-size:11.5px;font-weight:700}
.st-r{display:grid;grid-template-columns:104px 1fr 84px;align-items:center;gap:12px;color:#cdc6da;font-size:13px;font-weight:700}
.st-r .bk-lg{height:22px;padding:2px 7px;width:max-content}.st-r .bk-txt{font-size:13px}
.st-r i{display:block;height:9px;border-radius:5px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.st-r i:after{content:"";position:absolute;inset:0;width:var(--w);border-radius:5px;background:linear-gradient(90deg,#a78bfa,#7634CB);transform:scaleX(0);transform-origin:left;animation:d-grow 1s ease both;animation-delay:var(--t)}
.st-r b{text-align:right;color:#f2eff8;font-size:12.5px;opacity:0;animation:ov-in .4s ease both;animation-delay:calc(var(--t) + .5s)}
.st-sum{display:flex;justify-content:space-between;align-items:center;color:#cdc6da;font-size:13px;font-weight:700;opacity:0;animation:ov-in .4s ease both;animation-delay:var(--t)}
.st-sum b{color:#f2eff8}
.st-r + .st-sum{margin-top:2px;padding-top:9px;border-top:1px dashed rgba(255,255,255,.2)}
.st-fee b{color:#ff9aa8}
.st-tot{padding-top:9px;border-top:1px solid rgba(255,255,255,.2);font-size:14px}.st-tot b{color:#fff;font-size:20px;font-weight:900}
.d-set.st .d-chip{align-self:flex-end;margin-top:0}
.d-set.st{gap:7px}
.st-r{grid-template-columns:104px 1fr 34px 84px}
.st-r em{color:#9a92ad;font-size:11.5px;font-style:normal;text-align:right}
.st-fee{font-size:12.5px}
/* HERO 데모: 보조 분석(시장·현황·전략)은 왼쪽에 약하게, 핵심(쓸 수 있는 기능·적합도)은 오른쪽에 크게 */
html:not(.past-v) .sc2-out>section{background:rgba(255,255,255,.025)!important;border-color:rgba(255,255,255,.08)!important}
html:not(.past-v) .sc2-out>section h3{color:#9a92ad!important;font-size:12px!important}
html:not(.past-v) .sc2-out>section li,html:not(.past-v) .sc2-out .sc2-log li{color:#8f879f!important;font-size:11.5px!important;line-height:1.45!important}
html:not(.past-v) .sc2-more .sc2-key,html:not(.past-v) .sc2-more .fit{border-color:rgba(167,139,250,.45)!important;box-shadow:0 14px 40px rgba(124,77,255,.16)}
html:not(.past-v) .sc2-more .fit .fit-total b{font-size:46px}
@media(min-width:901px){
  html:not(.past-v) .sc2-demo{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:18px;align-items:start}
  html:not(.past-v) .sc2-demo .sc2-form{grid-column:1/-1;margin-bottom:18px}
  html:not(.past-v) .sc2-demo .sc2-out{grid-template-columns:1fr!important;margin-top:0!important;gap:10px!important}
  html:not(.past-v) .sc2-demo .sc2-out>section{height:96px!important;padding:10px 14px!important;overflow:hidden!important}
  html:not(.past-v) .sc2-demo .sc2-more>div,html:not(.past-v) .sc2-demo .sc2-more.open>div{padding-top:0}
  html:not(.past-v) .sc2-demo .sc2-more .sc2-key{padding:18px 20px}
  html:not(.past-v) .sc2-demo .sc2-more .fit,html:not(.past-v) .sc2-demo .sc2-more .fit.sk{padding:22px 24px 24px;min-height:210px}
}
/* HERO: 기능·적합도를 별도 모듈(카드)로 분리 */
@media(min-width:901px){
  html:not(.past-v) .sc2-demo{column-gap:26px;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  html:not(.past-v) .sc2-demo .sc2-more{align-self:stretch;display:block;padding:0;border:1px solid rgba(167,139,250,.5);border-radius:18px;background:linear-gradient(160deg,rgba(124,77,255,.2),rgba(18,13,31,.85) 60%);box-shadow:0 22px 60px rgba(124,77,255,.22)}
  html:not(.past-v) .sc2-demo .sc2-more>div{height:100%;padding:24px 26px;align-content:center;gap:0}
  html:not(.past-v) .sc2-demo .sc2-more .sc2-key,html:not(.past-v) .sc2-demo .sc2-more .sc2-key.sk{padding:0 0 20px;margin:0 0 20px;border:0!important;border-bottom:1px solid rgba(255,255,255,.14)!important;border-radius:0;background:transparent;box-shadow:none!important;min-height:0}
  html:not(.past-v) .sc2-demo .sc2-more .fit,html:not(.past-v) .sc2-demo .sc2-more .fit.sk{padding:0;border:0!important;background:transparent;box-shadow:none!important;min-height:0}
}
/* HERO: 왼쪽 = 입력 + 분석 3칸, 오른쪽 = 스켈레톤 → 기능·적합도 결과 */
@media(min-width:901px){
  html:not(.past-v) .sc2-demo{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  html:not(.past-v) .sc2-demo .sc2-form{grid-column:1;grid-template-columns:1fr 1fr;margin-bottom:14px}
  html:not(.past-v) .sc2-demo .sc2-form .sc2-go{grid-column:1/-1;height:48px}
  html:not(.past-v) .sc2-demo .sc2-out{grid-column:1;grid-row:2}
  html:not(.past-v) .sc2-demo .sc2-more{grid-column:2;grid-row:1/3}
}
/* HERO 우측: 빈 공간 채우기 + 기능 칩 정리, 입력칸 글자 축소 */
html:not(.past-v) .sc2-demo .sc2-roll{height:52px;font-size:17px}
html:not(.past-v) .sc2-demo .sc2-url{font-size:14px}
html:not(.past-v) .sc2-demo .sc2-roll span{line-height:50px;padding:0 16px}
@media(min-width:901px){
  html:not(.past-v) .sc2-demo .sc2-more>div{display:flex;flex-direction:column;justify-content:space-between;padding:26px 28px}
  html:not(.past-v) .sc2-demo .sc2-more .sc2-key,html:not(.past-v) .sc2-demo .sc2-more .sc2-key.sk{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start;margin:0;padding:0}
  html:not(.past-v) .sc2-demo .sc2-more .sc2-key p{grid-column:1/-1;margin:0 0 2px;font-size:13px}
  html:not(.past-v) .sc2-demo .sc2-more .sc2-key span{justify-content:flex-start;gap:8px;padding:13px 14px;border-radius:12px;font-size:14px}
  html:not(.past-v) .sc2-demo .sc2-more .sc2-key span:before{content:"✓";color:#b79cff;font-weight:900}
  html:not(.past-v) .sc2-demo .sc2-more .sc2-key.sk>i{width:100%;height:46px;border-radius:12px}
  html:not(.past-v) .sc2-demo .sc2-more .sc2-key.sk>.sk-l{grid-column:1/-1;height:14px;width:40%}
  html:not(.past-v) .sc2-demo .sc2-more .fit,html:not(.past-v) .sc2-demo .sc2-more .fit.sk{margin-top:auto;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)!important;min-height:0}
  html:not(.past-v) .sc2-demo .sc2-more .fit h3{font-size:15px;margin-bottom:16px}
  html:not(.past-v) .sc2-demo .sc2-more .fit-bar{height:20px;border-radius:10px}
  html:not(.past-v) .sc2-demo .sc2-more .fit-bar i{border-radius:10px}
  html:not(.past-v) .sc2-demo .sc2-more .fit .fit-total{margin-top:18px}
  html:not(.past-v) .sc2-demo .sc2-more .fit .fit-total b{font-size:72px}
  html:not(.past-v) .sc2-demo .sc2-more .fit.sk{min-height:170px}
}
@media(min-width:901px){
  html:not(.past-v) .sc2-demo .sc2-more.open>div{padding:26px 28px}
  html:not(.past-v) .sc2-demo .sc2-more .sc2-key span{padding:17px 16px;font-size:15px}
  html:not(.past-v) .sc2-demo .sc2-more .sc2-key.sk>i{height:54px}
  html:not(.past-v) .sc2-demo .sc2-more .sc2-key{gap:12px}
}
@media(min-width:901px){
  html:not(.past-v) .sc2-demo .sc2-more>div,html:not(.past-v) .sc2-demo .sc2-more.open>div{justify-content:center;gap:28px}
  html:not(.past-v) .sc2-demo .sc2-more .sc2-key,html:not(.past-v) .sc2-demo .sc2-more .sc2-key.sk{border-bottom:0!important;padding-bottom:0;margin-bottom:0}
  html:not(.past-v) .sc2-demo .sc2-more .fit,html:not(.past-v) .sc2-demo .sc2-more .fit.sk{margin-top:0}
  html:not(.past-v) .sc2-demo .sc2-more .sc2-key p{text-align:left}
  html:not(.past-v) .sc2-demo .sc2-more .sc2-key span:last-of-type:nth-of-type(odd){grid-column:1/-1}
}
@media(min-width:901px){html:not(.past-v) .sc2-demo .sc2-more .fit,html:not(.past-v) .sc2-demo .sc2-more .fit.sk{border:0!important;border-radius:0}}
/* ===== 현재안/과거안 전환(HERO·2번), FEATURES 1안/2안(목적별) ===== */
.ver-bar,.feat-tabs{display:flex;justify-content:center;gap:4px;width:max-content;max-width:100%;margin:0 auto;padding:4px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.05)}
.ver-bar{margin:14px auto 0;position:relative;z-index:5}
.feat-tabs{margin:26px auto 30px}
.ver-bar button,.feat-tabs button{padding:8px 18px;border:0;border-radius:999px;background:transparent;color:#b9b1cc;font:800 13px/1 inherit;cursor:pointer;transition:background .2s,color .2s}
.ver-bar button.on,.feat-tabs button.on{background:#7634CB;color:#fff}
.intro-past{display:none}
html.past-v .intro-past{display:block}
html.past-v .intro-now{display:none}
.feat-v1[hidden],.feat-v2[hidden]{display:none}
.feat-v2{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.fv2-col{display:flex;flex-direction:column;gap:14px;padding:22px 20px 20px;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:rgba(255,255,255,.03)}
.fv2-col>header{padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12)}
.fv2-col>header b{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#7634CB;color:#fff;font-size:14px;font-weight:900}
.fv2-col>header h3{margin:10px 0 4px;color:#f2eff8;font-size:22px;font-weight:800;letter-spacing:-.03em}
.fv2-col>header p{margin:0;color:#b79cff;font-size:14px;font-weight:700}
.fv2-card{display:grid;grid-template-columns:72px 1fr;gap:4px 14px;align-items:start;padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(18,13,31,.6)}
.fv2-card .icon{grid-row:1/3;display:block;width:72px}
.fv2-card .icon img{display:block;width:100%;height:auto}
.fv2-card h3{margin:0;color:#f2eff8;font-size:17px;font-weight:800;line-height:1.35;letter-spacing:-.02em}
.fv2-card p{margin:0;color:#cdc6da;font-size:13.5px;line-height:1.6}
@media(max-width:900px){.feat-v2{grid-template-columns:1fr}}
/* 현재안/과거안 바: 고정 헤더 아래, HERO 위쪽 여백에 겹쳐 둠 */
.ver-bar{position:absolute;top:80px;left:50%;transform:translateX(-50%);margin:0}
@media(max-width:700px){.ver-bar{top:72px}}
/* ===== E안 2번: 단계별 한 화면씩, 좌/우 번갈아 등장 ===== */
.ef{max-width:1240px;margin:20px auto 0}
.ef .dj-tag,.ef .dj-view h3,.ef .dj-sub{display:none}
.ef-stage{--dur:7800ms;min-height:100vh;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:56px;align-items:center;padding:48px 0;text-align:left}
.ef-stage:nth-child(even){grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}
.ef-stage:nth-child(even) .ef-text{order:2}
.ef-stage:nth-child(even) .ef-screen{order:1}
.ef-no{display:block;color:#b79cff;font-size:16px;font-weight:800;letter-spacing:.12em}.ef-no small{color:#6f6785;font-size:16px;font-weight:700}
.ef-text h3{margin:10px 0 18px;color:#fff;font-size:clamp(52px,6.4vw,92px);font-weight:900;letter-spacing:-.04em;line-height:1}
.ef-lead{margin:0 0 30px;color:#cdc6da;font-size:19px;line-height:1.6;word-break:keep-all}
.ef-methods{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.ef-methods button{position:relative;display:flex;align-items:center;gap:12px;width:100%;overflow:hidden;padding:15px 18px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.04);color:#9a92ad;font:inherit;font-size:17px;font-weight:800;text-align:left;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.ef-methods button i{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.6}
.ef-methods button:hover{color:#fff;border-color:rgba(167,139,250,.6)}
.ef-methods li.cur button{color:#fff;border-color:rgba(167,139,250,.7);background:rgba(124,77,255,.2)}
.ef-methods li.cur button i{background:#b79cff;opacity:1}
.ef-methods button:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:#a78bfa;transform:scaleX(0);transform-origin:left}
.ef-stage.run .ef-methods li.cur button:after{animation:d-prog var(--dur) linear forwards}
.ef-screen{margin:0}
@media(prefers-reduced-motion:no-preference){
  .ef-stage .ef-text,.ef-stage .ef-screen{opacity:0;transition:opacity .8s ease,transform .9s cubic-bezier(.16,.84,.44,1)}
  .ef-stage .ef-text{transform:translateX(-80px)}.ef-stage .ef-screen{transform:translateX(80px)}
  .ef-stage:nth-child(even) .ef-text{transform:translateX(80px)}.ef-stage:nth-child(even) .ef-screen{transform:translateX(-80px)}
  .ef-stage.in .ef-text,.ef-stage.in .ef-screen{opacity:1;transform:none}
  .ef-stage.in .ef-screen{transition-delay:.12s}
}
@media(max-width:900px){
  .ef-stage,.ef-stage:nth-child(even){grid-template-columns:1fr;min-height:0;gap:24px;padding:44px 0}
  .ef-stage:nth-child(even) .ef-text,.ef-stage:nth-child(even) .ef-screen{order:0}
  .ef-text h3{font-size:48px}.ef-lead{font-size:16px;margin-bottom:20px}
  .ef-methods button{font-size:15px;padding:13px 16px}
}
.ef .ef-lead{margin:0 0 30px!important;max-width:30em}
/* ===== 전체 페이징: 모든 섹션을 화면 높이 한 장으로, 한 번에 한 장씩 ===== */
@media(min-width:901px) and (min-height:600px){
  html{scroll-snap-type:y mandatory;scroll-padding-top:0!important}
  .hero,.ef-head,.ef-stage,.section,.closing,.intro{scroll-margin-top:0!important}
  .hero,.ef-head,.ef-stage,.section,.closing{scroll-snap-align:start;scroll-snap-stop:always}
  .hero,.section,.closing{min-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
  .section{padding-top:86px!important;padding-bottom:30px!important}
  .closing{min-height:calc(100vh - var(--ft,243px))}
  html[data-theme] .section.partners{min-height:100vh;display:flex;padding-top:86px;padding-bottom:30px}
  .ef-head{min-height:100vh}
}

/* 화면 높이에 맞추기 위한 압축 (데스크톱, 높이 1080px 이하) */
@media(min-width:901px) and (min-height:600px) and (max-height:1080px){
  .hero{padding-top:76px!important;padding-bottom:16px!important}
  .hero .sc2 h1{font-size:clamp(34px,5.6vh,54px)!important;line-height:1.12!important;margin-bottom:10px!important}
  .hero .eyebrow{margin-bottom:10px!important}
  .hero .sc2-lead{font-size:15px!important;line-height:1.55!important;margin:8px 0 0!important}
  .hero .sc2-actions{margin-top:14px!important}
  .hero .sc2-actions .btn{height:44px!important;padding:0 22px!important;font-size:14px!important}
  .sc2-win{margin-top:16px!important;padding:0 18px 14px!important}
  .sc2-win .sc2-demo{margin-top:12px!important}
  .sc-note{margin:8px 0 0!important;font-size:11.5px!important}
  html:not(.past-v) .sc2-demo .sc2-form{margin-bottom:8px!important}
  .sc2-demo .sc2-roll{height:42px!important;font-size:15px!important}
  .sc2-demo .sc2-roll span{line-height:40px!important}
  html:not(.past-v) .sc2-demo .sc2-form .sc2-go{height:40px!important}
  .sc2-label{font-size:12px!important}
  html:not(.past-v) .sc2-demo .sc2-out{gap:6px!important}
  html:not(.past-v) .sc2-demo .sc2-out>section{height:70px!important;padding:7px 12px!important}
  html:not(.past-v) .sc2-out>section li,html:not(.past-v) .sc2-out .sc2-log li{font-size:11px!important;line-height:1.35!important}
  html:not(.past-v) .sc2-demo .sc2-more>div,html:not(.past-v) .sc2-demo .sc2-more.open>div{padding:14px 20px!important;gap:14px!important}
  html:not(.past-v) .sc2-demo .sc2-more .sc2-key span{padding:9px 12px!important;font-size:13px!important}
  html:not(.past-v) .sc2-demo .sc2-more .fit .fit-total b{font-size:48px!important}
  html:not(.past-v) .sc2-demo .sc2-more .fit h3{margin-bottom:10px!important}
  html:not(.past-v) .sc2-demo .sc2-more .fit-bar{height:14px!important}
  /* FEATURES 1안: 카드를 가로형으로 줄여 한 화면에 */
  .features .section-head{margin-bottom:0!important}
  .features .section-head h2{font-size:clamp(30px,4.6vh,42px)!important}
  .features .section-head p{font-size:14.5px!important;line-height:1.55!important}
  .feat-tabs{margin:14px auto 16px!important}
  .feat-v1 .feature-grid{gap:12px!important}
  .feat-v1 .feature-card{display:grid!important;grid-template-columns:72px 1fr;column-gap:14px;align-items:start;padding:16px 18px!important;min-height:0!important}
  .feat-v1 .feature-card .icon{position:static!important;grid-row:1/3;display:block!important;width:72px!important;height:72px!important;margin:0!important;overflow:hidden}
  .feat-v1 .feature-card .icon img{display:block;width:72px!important;height:72px!important;object-fit:contain}
  .feat-v1 .feature-card h3{margin:0 0 4px!important;font-size:17px!important}
  .feat-v1 .feature-card p{margin:0!important;font-size:13px!important;line-height:1.5!important}
  .feat-v1 .feature-num{font-size:30px!important;top:10px!important}
  .feat-v1 .feature-callout{margin-top:12px!important}
  .faq{padding-top:78px!important}
}
/* HERO 데모 높이 고정: 결과 카드가 나와도 페이지 높이가 변하지 않게 (왼쪽 입력/분석 높이에 맞춤) */
@media(min-width:901px){html:not(.past-v) .sc2-demo .sc2-more{contain:size;min-height:0;overflow:hidden}}
/* 2번 영역: 제목을 별도 페이지가 아니라 단계 화면 위에 계속 붙어 있게(sticky) */
@media(min-width:901px) and (min-height:600px){
  .intro{padding-top:0!important}
  .ef-head{min-height:0!important;display:block!important;position:sticky;top:66px;z-index:6;padding:14px 0 12px;background:linear-gradient(rgba(12,9,22,.96) 78%,rgba(12,9,22,0));scroll-snap-align:none!important;scroll-snap-stop:normal!important;text-align:center}
  .ef-head h2{margin:0!important;font-size:clamp(20px,3vh,28px)!important;line-height:1.3!important}
  .ef-head p{display:none!important}
  .ef{margin-top:0}
  .ef-stage{padding:108px 0 36px}
}
/* 2번 제목: 단계 화면 위의 얇은 안내 줄로 (크게 떠 있지 않고 자연스럽게 붙어 있게) */
@media(min-width:901px) and (min-height:600px){
  .ef-head{padding:0!important;background:none!important;height:46px;display:flex!important;align-items:center;justify-content:center;box-shadow:0 0 0 100vmax rgba(12,9,22,.9);clip-path:inset(0 -100vmax);border-bottom:1px solid rgba(255,255,255,.08)}
  .ef-head h2{display:flex;align-items:center;gap:0;margin:0!important;color:#cdc6da!important;font-size:15px!important;font-weight:700!important;letter-spacing:-.01em;line-height:1!important}
  .ef-head h2 br{display:none}
  .ef-head h2 em{margin-left:.32em;color:#b79cff!important;font-style:normal}
  .ef-head h2:before{content:"";flex:0 0 auto;width:6px;height:6px;margin-right:10px;border-radius:50%;background:#a78bfa}
  .ef-stage{padding:96px 0 32px}
}
/* 2번 제목은 주내용이므로 크게: 단계 화면 위에 큰 제목+설명을 계속 붙여 두고, 화면 카드는 남은 높이에 맞춘다 */
@media(min-width:901px) and (min-height:600px){
  .ef-head{height:auto!important;display:block!important;padding:18px 0 16px!important;border-bottom:0!important;clip-path:inset(0 -100vmax)!important;box-shadow:0 0 0 100vmax rgba(12,9,22,.96)!important;background:none!important}
  .ef-head h2{display:block!important;margin:0!important;color:#fff!important;font-size:clamp(26px,4.6vh,42px)!important;font-weight:900!important;line-height:1.25!important;letter-spacing:-.03em}
  .ef-head h2 br{display:inline!important}
  .ef-head h2 em{margin-left:0!important;color:#b79cff!important;font-style:normal}
  .ef-head h2:before{display:none!important}
  .ef-head p{display:block!important;margin:8px 0 0!important;color:#cdc6da;font-size:clamp(13px,2vh,16px)!important;line-height:1.5!important}
  .ef-stage{padding:calc(66px + var(--efh,170px) + 12px) 0 18px!important}
  .ef .dj-screen{height:min(600px,calc(100vh - 66px - var(--efh,170px) - 46px))!important}
}
/* 위계: 주내용은 위의 제목. 단계 이름(상품·판매·사용·정산)은 보조로 작게 */
.ef-text h3{font-size:clamp(28px,2.8vw,40px)!important;font-weight:800!important;margin:6px 0 12px!important;color:#e6e0f2!important}
.ef-no{font-size:13px!important}.ef-no small{font-size:13px!important}
.ef-lead{font-size:16px!important;margin-bottom:22px!important}
.ef-methods button{font-size:15px!important;padding:13px 16px!important}
@media(min-width:901px) and (min-height:600px){
  .ef-head h2{font-size:clamp(30px,5.8vh,54px)!important}
  .ef-head p{font-size:clamp(14px,2.2vh,17px)!important;margin-top:10px!important}
}
/* 상단 고정 제목 다듬기: 헤더와 간격, 아래쪽은 부드럽게 페이드 */
@media(min-width:901px) and (min-height:600px){
  .ef-head{position:sticky!important;isolation:isolate;clip-path:none!important;box-shadow:none!important;padding:26px 0 18px!important}
  .ef-head:before{content:"";position:absolute;z-index:-1;left:-100vmax;right:-100vmax;top:0;bottom:-30px;background:linear-gradient(rgba(12,9,22,.97) 82%,rgba(12,9,22,0))}
  .ef-head h2{text-shadow:0 2px 28px rgba(124,77,255,.12)}
  .ef-head p{max-width:34em;margin-left:auto!important;margin-right:auto!important;color:#b9b1cc!important}
  .ef-stage{padding:calc(66px + var(--efh,190px) + 22px) 0 18px!important}
  .ef .dj-screen{height:min(600px,calc(100vh - 66px - var(--efh,190px) - 58px))!important}
}
@media(min-width:901px) and (min-height:600px){.ef-head{padding-top:46px!important}}
@media(min-width:901px) and (min-height:600px){.ef-head{padding-top:68px!important}}
@media(min-width:901px) and (min-height:600px){.ef-head{padding-top:128px!important}}
/* 고정 제목 여백·크기를 화면 높이에 비례시켜, 작은 화면/큰 화면에서 비슷한 비율로 보이게 */
@media(min-width:901px) and (min-height:600px){
  .ef-head{padding-top:clamp(18px,12vh,190px)!important;padding-bottom:clamp(10px,2.2vh,28px)!important}
  .ef-head h2{font-size:clamp(24px,5.4vh,62px)!important}
  .ef-head p{font-size:clamp(12px,1.9vh,18px)!important;margin-top:1.1vh!important}
  .ef-stage{padding-bottom:clamp(10px,2vh,28px)!important}
}
@media(min-width:901px) and (min-height:600px) and (max-height:760px){
  .ef-head p{display:none!important}
  .ef-head{padding-top:clamp(14px,8vh,60px)!important}
}
/* 정산: 1) 채널별 사용 완료분 → 2) 다음 화면에서 합계·차감·지급 예정 금액을 한 번에 */
.d-set.st{position:relative;min-height:340px}
.st-p1{display:flex;flex-direction:column;gap:9px;animation:ov-out .5s ease 4.6s both}
.st-p1 .st-r b{animation-delay:calc(var(--t) + .5s)}
@keyframes ov-out{to{opacity:0;visibility:hidden}}
.st-p2{position:absolute;left:0;right:0;top:44px;bottom:0;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:0 22px 12px;opacity:0;animation:ov-in .6s ease 5.1s both}
.st-p2 .st-sum{opacity:1!important;animation:none!important;font-size:15px}
.st-p2 .st-sum+.st-sum{padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
.st-p2 .st-fee b{color:#ff9aa8}
.st-p2 .st-tot{padding-top:18px;border-top:1px solid rgba(255,255,255,.22)!important;font-size:16px}
.st-p2 .st-tot b{font-size:34px;font-weight:900}
.st-p2 .st-chip{align-self:flex-end;margin-top:2px;--t:6s}
/* 정산 1단계(채널별): 위쪽에 몰리지 않게 카드 안에서 여유 있게 배치 */
.d-set.st{min-height:380px;padding:18px 24px 22px}
.st-p1{flex:1;justify-content:center;gap:20px!important}
.st-p1 .st-h{margin:0 0 4px;padding-bottom:12px}
.st-p1 .st-r{grid-template-columns:112px 1fr 38px 90px;gap:16px}
.st-p2{top:46px;padding:0 24px 16px}
.d-set.st{min-height:0;padding:18px 24px 24px}
.st-p1{flex:none;justify-content:flex-start;gap:18px!important}
.st-p1 .st-h{margin:12px 0 2px}
.st-p2{top:40px}
/* 정산 2단계: 위 제목과 겹치지 않게 카드 높이를 확보하고 위에서부터 배치 */
.d-set.st{min-height:360px}
.st-p2{top:52px;bottom:8px;justify-content:space-evenly;gap:0;padding:0 24px 10px}
.st-p2 .st-sum+.st-sum{padding-top:10px}
.st-p2 .st-tot{padding-top:12px}
/* 판매·정산 단계는 바깥 창 테두리 없이 장면만 */
.ef-stage[data-s="1"] .ef-screen,.ef-stage[data-s="3"] .ef-screen{border:0!important;background:none!important;box-shadow:none!important;border-radius:0}
.ef-stage[data-s="1"] .dj-top,.ef-stage[data-s="3"] .dj-top{display:none}
/* 상품·사용도 바깥 창 테두리 제거 (4단계 모두 장면만) */
.ef-stage .ef-screen{border:0!important;background:none!important;box-shadow:none!important;border-radius:0}
.ef-stage .dj-top{display:none}
/* 창 테두리가 없어진 뒤: 잘린 폰은 아래로 부드럽게 사라지게, 등록 완료 화면 배경은 페이지색에 맞춤 */
.ef-stage .us-phone,.ef-stage .gp-phone{-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.ef-stage .reg-end{background:#0c0916}
/* 2번 영역 여백을 REAL IMPACT와 비슷한 리듬으로: 제목은 비슷한 높이, 제목-애니메이션 간격은 좁게 */
@media(min-width:901px) and (min-height:600px){
  .ef-head{padding-top:clamp(18px,10vh,130px)!important;padding-bottom:clamp(8px,1.6vh,18px)!important}
  .ef-head:before{bottom:-14px}
  .ef-stage{align-items:start!important;padding:calc(66px + var(--efh,170px) + clamp(6px,1.6vh,22px)) 0 18px!important}
  .ef .dj-screen{height:min(620px,calc(100vh - 66px - var(--efh,170px) - 44px))!important}
  .ef .dj-body{padding-top:0!important}
  .ef .dj-scenes{align-items:flex-start!important}
  .ef-text{align-self:center;padding-top:0}
}
@media(min-width:901px) and (min-height:600px){
  .ef .d-scene.on{align-items:flex-start!important;align-self:flex-start;height:auto!important;min-height:0!important;margin-top:0!important}
}
@media(min-width:901px) and (min-height:600px){
  .ef .dj-scenes{flex-direction:column!important;justify-content:flex-start!important}
  .ef .d-scene.on{margin:0!important;padding-top:0!important}
  .ef .d-scene.d-v1.on .bk{align-items:flex-start}
}
/* 정돈된 구도: 텍스트와 장면이 같은 중심선에 놓이고, 장면 뒤에는 은은한 무대 빛을 깔아 크기가 달라도 의도된 배치로 보이게 */
@media(min-width:901px) and (min-height:600px){
  .ef-stage{align-items:center!important;padding:calc(66px + var(--efh,170px) + 6px) 0 22px!important}
  .ef .dj-screen{height:min(520px,calc(100vh - 66px - var(--efh,170px) - 60px))!important;position:relative;display:flex;flex-direction:column;justify-content:center}
  .ef .dj-screen:before{content:"";position:absolute;left:-6%;right:-6%;top:-4%;bottom:-4%;z-index:-1;background:radial-gradient(52% 50% at 50% 50%,rgba(124,77,255,.20),rgba(124,77,255,.06) 55%,transparent 72%);pointer-events:none}
  .ef .dj-body{flex:0 1 auto!important}
  .ef .dj-scenes{justify-content:center!important;align-items:center!important}
  .ef .d-scene.on{align-items:center!important;align-self:center!important}
  .ef-text{align-self:center!important}
}
@media(min-width:901px) and (min-height:600px){
  .ef-stage{align-content:start!important;padding-top:calc(66px + var(--efh,170px) + 14px)!important}
  .ef .dj-screen{height:min(470px,calc(100vh - 66px - var(--efh,170px) - 70px))!important}
}
/* 내용은 제목 아래 남은 영역의 세로 가운데에, 단계 이름 위치는 4단계 모두 같게(방식 목록 높이를 3줄로 통일) */
@media(min-width:901px) and (min-height:600px){
  .ef-stage{align-content:center!important;padding:calc(66px + var(--efh,170px) + 10px) 0 28px!important}
  .ef-methods{min-height:178px;justify-content:flex-start}
}
/* 이전의 좁은 간격 유지 + 제목을 더 아래로 */
@media(min-width:901px) and (min-height:600px){
  .ef-head{padding-top:clamp(18px,17.5vh,230px)!important}
  .ef-stage{align-content:start!important;padding:calc(66px + var(--efh,170px) + 14px) 0 20px!important}
  .ef .dj-screen{height:min(470px,calc(100vh - 66px - var(--efh,170px) - 40px))!important}
}
/* ===== FEATURES 3안: 스택 카드 (이전 3안 트랙 방식 대체) ===== */
.feat-v3[hidden]{display:none}
.feat-v3{--f3n:6;height:calc(100vh * 3.6)}
.f3-pin{position:sticky;top:66px;height:calc(100vh - 66px - 24px);display:flex;flex-direction:column}
.f3-top{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px}
.f3-top h3{margin:0;color:#fff;font-size:clamp(22px,2.6vw,30px);font-weight:900;letter-spacing:-.03em}
.f3-dots{display:flex;gap:8px}
.f3-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.22);cursor:pointer;transition:width .3s,background .3s}
.f3-dots button.on{width:26px;border-radius:5px;background:#a78bfa}
.f3-stack{position:relative;flex:1 1 auto;min-height:0}
.f3-card{position:absolute;inset:0;display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:clamp(22px,4vh,44px) 44px;border:1px solid rgba(167,139,250,.3);border-radius:28px;background:linear-gradient(150deg,#2a1f4d,#161024 62%);box-shadow:0 -18px 40px rgba(0,0,0,.35);box-sizing:border-box;will-change:transform;transform-origin:50% 0}
.f3-tag{display:inline-block;padding:6px 14px;border-radius:999px;border:1px solid rgba(183,156,255,.45);background:rgba(124,77,255,.2);color:#d9c8ff;font-size:13px;font-weight:800}
.f3-body h4{margin:clamp(12px,2.4vh,22px) 0 clamp(10px,2vh,16px);color:#fff;font-size:clamp(24px,3.6vh+8px,40px);font-weight:900;line-height:1.3;letter-spacing:-.03em;word-break:keep-all}
.f3-body p{margin:0;color:#cdc6da;font-size:clamp(15px,1.5vw,18px);line-height:1.7;word-break:keep-all;max-width:34em}
.f3-ic{position:relative;display:grid;place-items:center;height:100%;min-height:0}
.f3-ic img{max-width:100%;max-height:min(100%,300px);width:auto;height:auto;filter:drop-shadow(0 18px 30px rgba(75,29,146,.5))}
.f3-no{position:absolute;right:0;top:0;color:rgba(183,156,255,.55);font-size:15px;font-weight:800;letter-spacing:.1em}.f3-no small{color:rgba(255,255,255,.3)}
@media(max-width:900px){.feat-v3{height:calc(100vh * 4.2)}.f3-card{grid-template-columns:1fr;padding:22px 20px;align-content:start}.f3-ic{order:-1;justify-self:start;height:auto}.f3-ic img{width:90px}.f3-top{flex-direction:column;align-items:flex-start}}
.f3-pin{top:72px;height:calc(100vh - 72px - 20px)}
.f3-stack{margin-top:34px}
/* 3안 카드: 내용에 맞는 크기로 줄이고 화면 가운데에 */
.feat-v3{height:calc(100vh * 2.7)}
.f3-pin{justify-content:center;align-items:center}
.f3-top,.f3-stack{width:min(100%,940px)}
.f3-top{margin-bottom:16px}
.f3-stack{flex:none;height:clamp(250px,36vh,320px);margin-top:30px}
.f3-card{grid-template-columns:1.25fr .75fr;gap:20px;padding:24px 36px;border-radius:24px}
.f3-body h4{font-size:clamp(20px,2.3vw,28px);margin:12px 0 10px}
.f3-body p{font-size:clamp(14px,1.3vw,16px);line-height:1.65}
.f3-ic img{max-height:min(100%,200px)}
.f3-tag{font-size:12px;padding:5px 12px}
@media(max-width:900px){.feat-v3{height:calc(100vh * 3.2)}.f3-stack{height:auto;min-height:340px}}
/* 3안: FEATURES 제목+탭부터 카드까지 한 묶음으로 화면 세로 가운데에 고정, 스크롤하면 카드만 쌓임 */
@media(min-width:901px) and (min-height:600px){
  .features.f3-on{display:block!important;min-height:0!important;height:calc(100vh * 2.7);padding-top:0!important;padding-bottom:0!important}
  .features.f3-on > .container{position:sticky;top:66px;height:calc(100vh - 66px);display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;padding:8px 0 20px}
  .features.f3-on .section-head{margin-bottom:0!important}
  .features.f3-on .feat-tabs{margin:14px auto 12px!important}
  .features.f3-on .feat-v3{height:auto}
  .features.f3-on .f3-pin{position:static;height:auto}
  .features.f3-on .f3-stack{height:clamp(240px,34vh,310px);margin-top:26px}
}
/* 3안 단독: 한눈에 들어오도록 카드를 선명한 보라 그라데이션+글로우로, 질문은 크게, 일러스트는 은은히 떠다니게 */
.f3-top{justify-content:center!important}
.f3-card{border:1px solid rgba(204,184,255,.6)!important;background:linear-gradient(135deg,#7a46f0 0%,#4a26b0 42%,#1d1239 100%)!important;box-shadow:0 -14px 36px rgba(0,0,0,.4),0 28px 80px rgba(124,77,255,.38)!important}
.f3-card:before{content:attr(data-n);position:absolute;right:30px;bottom:-26px;color:rgba(255,255,255,.07);font-size:170px;font-weight:900;line-height:1;letter-spacing:-.05em;pointer-events:none}
.f3-body h4{font-size:clamp(24px,2.9vw,36px)!important;color:#fff;text-shadow:0 2px 20px rgba(30,10,80,.5)}
.f3-body p{color:#eae1ff!important;font-size:clamp(15px,1.4vw,17px)!important}
.f3-tag{background:rgba(255,255,255,.18)!important;border-color:rgba(255,255,255,.5)!important;color:#fff!important}
.f3-no{color:rgba(255,255,255,.75)!important}
.f3-ic img{max-height:min(100%,230px)!important;animation:f3-float 4.2s ease-in-out infinite;filter:drop-shadow(0 22px 34px rgba(20,6,60,.6))}
@keyframes f3-float{50%{transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.f3-ic img{animation:none}}
.f3-dots button{background:rgba(255,255,255,.3)!important}.f3-dots button.on{background:#fff!important}
@media(min-width:901px) and (min-height:600px){.features.f3-on .f3-stack{height:clamp(260px,38vh,340px)}}
/* 카드를 가로로 넓히고, 진행 점은 카드 아래로 */
.f3-top,.f3-stack{width:100%!important}
.f3-top{margin:18px 0 0!important}
.f3-stack{margin-top:0!important}
.features.f3-on .f3-stack{margin-top:22px!important;height:clamp(270px,40vh,350px)}
.f3-card{padding:28px 56px!important;grid-template-columns:1.3fr .7fr!important}
.f3-body p{max-width:38em}
.f3-ic img{max-height:min(100%,250px)!important}
/* 3안 여백: 위쪽과 제목-카드 사이를 조금 넓힘 */
@media(min-width:901px) and (min-height:600px){
  .features.f3-on > .container{padding-top:26px!important}
  .features.f3-on .f3-stack{margin-top:44px!important}
  .f3-top{margin-top:22px!important}
}
@media(min-width:901px) and (min-height:600px){
  .features.f3-on .f3-stack{margin-top:clamp(40px,11vh,100px)!important;height:clamp(250px,37vh,330px)!important}
}
/* ===== 식스샵식 구성: 중앙 제목 + 어두운 카드 스택, 진행 점은 오른쪽 세로 ===== */
.features .section-head.center{text-align:center}
.features .section-head.center .kicker{justify-content:center;background:linear-gradient(90deg,#a78bfa,#f0abfc);-webkit-background-clip:text;background-clip:text;color:transparent}
.features .section-head.center .kicker i{display:none}
.features .section-head.center h2{font-size:clamp(30px,5.2vh,50px)!important}
.features .section-head.center p:not(.kicker){margin-left:auto;margin-right:auto}
.features.f3-on > .container:before{content:"";position:absolute;left:50%;top:-6%;width:min(1100px,120%);height:60%;transform:translateX(-50%);background:radial-gradient(50% 60% at 50% 30%,rgba(124,77,255,.28),transparent 70%);pointer-events:none;z-index:-1}
.f3-card{background:linear-gradient(160deg,#211c33,#15121f 70%)!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 -14px 36px rgba(0,0,0,.45),0 24px 60px rgba(0,0,0,.4)!important}
.f3-card:before{color:rgba(255,255,255,.05)!important}
.f3-tag{background:rgba(124,77,255,.22)!important;border-color:rgba(183,156,255,.45)!important;color:#d9c8ff!important}
.f3-no{color:rgba(255,255,255,.5)!important}
.f3-ic{border-radius:22px;background:radial-gradient(70% 70% at 50% 45%,rgba(124,77,255,.28),rgba(255,255,255,.03) 70%);height:100%}
.f3-dots{position:absolute;right:-30px;top:50%;transform:translateY(-50%);flex-direction:column;z-index:60}
.f3-dots button{width:9px;height:9px}
.f3-dots button.on{width:9px!important;height:26px;border-radius:5px}
@media(max-width:1260px){.f3-dots{right:8px}}
@media(max-width:900px){.f3-dots{position:static;transform:none;flex-direction:row;justify-content:center;margin-top:14px}.f3-dots button.on{width:26px!important;height:9px}}
/* 탭(1안/2안): 오른쪽 위에 작게 */
.features > .container{position:relative}
.feat-tabs{position:absolute;top:18px;right:0;z-index:70;display:flex;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(12,9,22,.7);backdrop-filter:blur(8px);margin:0!important}
.feat-tabs button{padding:8px 16px;border:0;border-radius:999px;background:transparent;color:#b9b1cc;font:800 13px/1 inherit;cursor:pointer}
.feat-tabs button.on{background:#7634CB;color:#fff}
.feat-v3[hidden],.feat-v4[hidden]{display:none}
/* 2안: 스토리텔링 타임라인 */
.features:not(.f3-on){display:block!important;min-height:0!important}
.f4-intro{text-align:center;margin:56px 0 30px}
.f4-intro h3{margin:0;color:#fff;font-size:clamp(28px,4vw,44px);font-weight:900;letter-spacing:-.04em;line-height:1.25}
.f4-intro h3 em{color:#b79cff;font-style:normal}
.f4-line{position:relative;list-style:none;margin:0;padding:10px 0 40px}
.f4-line:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:linear-gradient(#a78bfa,rgba(167,139,250,.15))}
.f4-ch{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;min-height:min(52vh,420px);padding:30px 0;opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,.84,.44,1)}
.f4-ch.in{opacity:1;transform:none}
.f4-dot{position:absolute;left:50%;top:50%;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);background:#0c0916;border:3px solid #a78bfa;box-shadow:0 0 0 6px rgba(167,139,250,.18);z-index:2}
.f4-ch:nth-child(even) .f4-txt{order:2}
.f4-txt{text-align:left}
.f4-n{display:block;color:#b79cff;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.f4-txt h4{margin:10px 0 14px;color:#fff;font-size:clamp(24px,2.8vw,34px);font-weight:900;letter-spacing:-.03em;line-height:1.3;word-break:keep-all}
.f4-txt p{margin:0 0 16px;color:#cdc6da;font-size:16.5px;line-height:1.7;word-break:keep-all;max-width:30em}
.f4-tag{display:inline-block;padding:6px 14px;border-radius:999px;border:1px solid rgba(183,156,255,.45);background:rgba(124,77,255,.2);color:#d9c8ff;font-size:13px;font-weight:800}
.f4-img{display:grid;place-items:center;aspect-ratio:1.5;border-radius:26px;background:radial-gradient(70% 70% at 50% 45%,rgba(124,77,255,.3),rgba(255,255,255,.03) 72%);border:1px solid rgba(255,255,255,.08)}
.f4-img img{width:min(70%,300px);height:auto;filter:drop-shadow(0 20px 32px rgba(20,6,60,.55))}
@media(prefers-reduced-motion:reduce){.f4-ch{opacity:1;transform:none;transition:none}}
@media(max-width:900px){.f4-line:before{left:14px}.f4-dot{left:14px}.f4-ch{grid-template-columns:1fr;gap:18px;padding:24px 0 24px 40px}.f4-ch:nth-child(even) .f4-txt{order:0}.feat-tabs{position:static;margin:0 auto 14px!important;width:max-content}}
/* 2안 스토리: 전체적으로 작고 정돈되게 (아이콘·이미지·글자·간격 축소) */
.f4-intro{margin:34px 0 18px}
.f4-intro h3{font-size:clamp(22px,2.8vw,32px)}
.f4-line{padding:6px 0 24px}
.f4-ch{min-height:0;gap:56px;padding:16px 0}
.f4-dot{width:13px;height:13px;border-width:2px;box-shadow:0 0 0 5px rgba(167,139,250,.16)}
.f4-n{font-size:11.5px}
.f4-txt h4{margin:6px 0 8px;font-size:clamp(19px,2vw,24px)}
.f4-txt p{margin:0 0 10px;font-size:14.5px;line-height:1.65;max-width:28em}
.f4-tag{font-size:12px;padding:5px 12px}
.f4-img{width:min(100%,300px);aspect-ratio:1.9;border-radius:20px;background:radial-gradient(70% 80% at 50% 45%,rgba(124,77,255,.22),rgba(255,255,255,.025) 72%);justify-self:start}
.f4-ch:nth-child(even) .f4-img{justify-self:end}
.f4-img img{width:auto;height:72%;max-width:60%;filter:drop-shadow(0 12px 20px rgba(20,6,60,.5))}
@media(max-width:900px){.f4-ch{gap:12px;padding:16px 0 16px 36px}.f4-img{width:100%;justify-self:stretch!important}}
/* 2안 스토리: 텍스트를 가운데 선 쪽으로 붙여 좌우 대칭 정렬 */
@media(min-width:901px){
  .f4-ch:nth-child(odd) .f4-txt{text-align:right;justify-self:end}
  .f4-ch:nth-child(odd) .f4-txt p{margin-left:auto}
  .f4-ch:nth-child(even) .f4-txt{text-align:left;justify-self:start}
}
.feat-v5[hidden]{display:none}
/* ===== 4안: 맞춤 추천 ===== */
.feat-v6[hidden]{display:none}
.features.f6-on{display:flex!important;flex-direction:column;justify-content:center;min-height:100vh!important}
.f6-q{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:34px 0 22px}
.f6-row{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.04)}
.f6-row>span{color:#e6e0f2;font-size:15px;font-weight:800}
.f6-sw{display:flex;gap:6px;padding:4px;border-radius:999px;background:rgba(0,0,0,.28)}
.f6-sw button{flex:1;padding:9px 0;border:0;border-radius:999px;background:transparent;color:#a79fbd;font:800 13.5px/1 inherit;cursor:pointer;transition:background .2s,color .2s}
.f6-sw button.on{background:#7634CB;color:#fff}
.f6-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.f6-card{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start;padding:18px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:linear-gradient(160deg,#211c33,#15121f 70%);animation:f6in .5s ease both}
.f6-card img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(20,6,60,.5))}
.f6-why{display:inline-block;margin-bottom:6px;padding:4px 10px;border-radius:999px;background:rgba(124,77,255,.22);color:#d9c8ff;font-size:12px;font-weight:800;line-height:1.35}
.f6-card h4{margin:0 0 6px;color:#fff;font-size:16.5px;font-weight:800;letter-spacing:-.02em}
.f6-card p{margin:0;color:#b9b1cc;font-size:13px;line-height:1.55}
@keyframes f6in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.f6-card{animation:none}}
@media(max-width:900px){.f6-q{grid-template-columns:1fr 1fr}.f6-cards{grid-template-columns:1fr}}
/* 탭: 제목과 겹치지 않게 위쪽 가운데로 */
.feat-tabs{position:static!important;width:max-content;max-width:100%;margin:0 auto 14px!important;flex-wrap:wrap;justify-content:center}
/* ===== 5안: 업종별 조합 ===== */
.feat-v7[hidden]{display:none}
.feat-v7{text-align:center}
.f7-q{margin:28px 0 20px;color:#fff;font-size:clamp(24px,3.4vh+8px,38px);font-weight:900;letter-spacing:-.03em}
.f7-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:880px;margin:0 auto}
.f7-pills button{padding:14px 26px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.06);color:#bdb5d1;font:800 16px/1 inherit;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.f7-pills button:hover{color:#fff;border-color:rgba(167,139,250,.7)}
.f7-pills button.on{background:#7634CB;border-color:transparent;color:#fff;transform:translateY(-2px)}
.f7-tg{margin:24px 0 16px;color:#cdc6da;font-size:17px;font-weight:700}
.f7-combo{display:flex;align-items:stretch;justify-content:center;gap:10px}
.f7-plus{align-self:center;color:#a78bfa;font-size:28px;font-weight:900}
.f7-card{flex:1 1 0;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 20px 20px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:linear-gradient(160deg,#211c33,#15121f 70%);animation:f6in .5s ease both}
.f7-card img{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(20,6,60,.5))}
.f7-why{padding:4px 11px;border-radius:999px;background:rgba(124,77,255,.22);color:#d9c8ff;font-size:12px;font-weight:800;line-height:1.4}
.f7-card h4{margin:2px 0 0;color:#fff;font-size:17px;font-weight:800;letter-spacing:-.02em}
.f7-card p{margin:0;color:#b9b1cc;font-size:13px;line-height:1.55}
@media(prefers-reduced-motion:reduce){.f7-card{animation:none}}
@media(max-width:900px){.f7-combo{flex-direction:column;align-items:stretch}.f7-card{max-width:none}.f7-plus{align-self:center}}
/* ===== FEATURES (업종별): 카테고리 → 판매할 상품권 + 사용할 기능 ===== */
#features.features{display:flex!important;flex-direction:column;justify-content:center;min-height:100vh!important}
.feat-v7{text-align:center}
.f7-q{margin:30px 0 18px;color:#fff;font-size:clamp(22px,3vh+8px,34px);font-weight:900;letter-spacing:-.03em}
.f7-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:880px;margin:0 auto}
.f7-pills button{display:inline-flex;align-items:center;gap:10px;padding:10px 24px 10px 14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.06);color:#bdb5d1;font:800 16px/1 inherit;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.f7-pills button img{width:28px;height:28px;object-fit:contain;filter:grayscale(.4) opacity(.8);transition:filter .2s}
.f7-pills button:hover{color:#fff;border-color:rgba(167,139,250,.7)}
.f7-pills button.on{background:#7634CB;border-color:transparent;color:#fff;transform:translateY(-2px)}
.f7-pills button.on img{filter:none}
.f7-tg{margin:20px 0 16px;color:#b79cff;font-size:15px;font-weight:800}
.f7-body{display:grid;grid-template-columns:.85fr 1.15fr;gap:16px;max-width:1000px;margin:0 auto;text-align:left}
.f7-col{padding:22px 24px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:linear-gradient(160deg,#211c33,#15121f 70%)}
.f7-col h4{margin:0 0 14px;color:#fff;font-size:17px;font-weight:900;letter-spacing:-.02em}
.f7-vouchers{display:flex;flex-direction:column;gap:10px}
.f7-vc{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;border:1px dashed rgba(183,156,255,.5);background:linear-gradient(135deg,rgba(124,77,255,.28),rgba(124,77,255,.08));animation:f6in .5s ease both}
.f7-vc i{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:#7634CB;position:relative}
.f7-vc i:after{content:"";position:absolute;inset:9px;border:2px solid #fff;border-radius:3px}
.f7-vc small{display:block;color:#b79cff;font-size:11.5px;font-weight:800;letter-spacing:.04em}
.f7-vc b{color:#fff;font-size:16px;font-weight:800;line-height:1.35}
.f7-feats{display:flex;flex-direction:column;gap:10px}
.f7-ft{display:flex;gap:12px;padding:13px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);animation:f6in .5s ease both}
.f7-ft.hot{border-color:rgba(183,156,255,.55);background:rgba(124,77,255,.16)}
.f7-ck{flex:0 0 auto;width:22px;height:22px;margin-top:1px;border-radius:50%;background:#7634CB;position:relative}
.f7-ck:after{content:"";position:absolute;left:7px;top:4px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.f7-ft b{display:flex;align-items:center;gap:8px;color:#fff;font-size:15.5px;font-weight:800}
.f7-ft b em{padding:2px 8px;border-radius:999px;background:#a78bfa;color:#1b0f3a;font-size:11px;font-style:normal;font-weight:900}
.f7-ft p{margin:3px 0 0;color:#b9b1cc;font-size:13px;line-height:1.55}
@media(prefers-reduced-motion:reduce){.f7-vc,.f7-ft{animation:none}}
@media(max-width:900px){.f7-body{grid-template-columns:1fr}}
/* 유통채널 노출: 모바일 상품권 카드를 연결선(채널 목록) 가운데에 맞춤 */
@media(min-width:901px) and (min-height:600px){.ef .d-scene.d-v1.on .bk{align-items:center!important}}
/* 업종별: 기능 영역은 기존 카드를 축소해서, 역할 문구는 기능 영역 안으로 */
.f7-pills{margin-top:26px}
.f7-role{display:flex;align-items:center;gap:10px;margin:-4px 0 14px;padding:10px 14px;border-radius:12px;background:rgba(124,77,255,.16);border:1px solid rgba(183,156,255,.35)}
.f7-role em{flex:0 0 auto;padding:3px 10px;border-radius:999px;background:#a78bfa;color:#1b0f3a;font-size:11.5px;font-style:normal;font-weight:900}
.f7-role b{color:#fff;font-size:14.5px;font-weight:800}
.f7-cards{display:flex;flex-direction:column;gap:10px}
.f7-fc{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.03);animation:f6in .5s ease both}
.f7-fc.hot{border-color:rgba(183,156,255,.55);background:rgba(124,77,255,.14)}
.f7-fc img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(20,6,60,.5))}
.f7-fc h5{margin:0 0 4px;display:flex;align-items:center;gap:8px;color:#fff;font-size:15px;font-weight:800;line-height:1.3;letter-spacing:-.02em}
.f7-fc h5 br{display:none}
.f7-fc h5 em{flex:0 0 auto;padding:2px 8px;border-radius:999px;background:#a78bfa;color:#1b0f3a;font-size:11px;font-style:normal;font-weight:900}
.f7-fc p{margin:0;color:#b9b1cc;font-size:12.5px;line-height:1.5}
.f7-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.f7-chips small{color:#8f87a5;font-size:12px;font-weight:800;margin-right:2px}
.f7-chips span{padding:6px 12px;border-radius:999px;border:1px solid rgba(183,156,255,.4);background:rgba(124,77,255,.18);color:#e6dcff;font-size:13px;font-weight:800}
@media(prefers-reduced-motion:reduce){.f7-fc{animation:none}}
/* 역할 문구: 라벨 칩 없이 자연스러운 한 줄로 */
.f7-role{display:block!important;margin:-6px 0 14px!important;padding:0!important;border:0!important;background:none!important;color:#b79cff;font-size:14px;font-weight:700;line-height:1.5}
/* ===== REAL IMPACT: 카드 넘기기 대신 세로로 나열, 좌우를 번갈아 등장 ===== */
#impact .imp-tabs,#impact .imp-nav{display:none!important}
#impact .imp-track{display:flex;flex-direction:column;gap:26px;overflow:visible;scroll-snap-type:none;margin:0;padding:0}
#impact .imp-card{flex:none;width:100%;scroll-snap-align:none;grid-template-columns:1.1fr 1fr;gap:56px;padding:26px 36px;opacity:0;transition:opacity .8s ease,transform .9s cubic-bezier(.16,.84,.44,1)}
#impact .imp-card:nth-child(odd){transform:translateX(-70px)}
#impact .imp-card:nth-child(even){transform:translateX(70px)}
#impact .imp-card:nth-child(even) .imp-vis{order:2}
#impact .imp-card.seen{opacity:1;transform:none}
#impact .imp-card:not(.seen){opacity:0}
@media(prefers-reduced-motion:reduce){#impact .imp-card{opacity:1!important;transform:none!important;transition:none}}
@media(max-width:900px){#impact .imp-card,#impact .imp-card:nth-child(even){grid-template-columns:1fr;gap:20px;padding:20px}#impact .imp-card:nth-child(even) .imp-vis{order:0}}
/* 화면 밖으로 나간 카드는 흐리게만(사라지지 않음) → 빨리 지나가도 내용이 남아 있음 */
#impact .imp-card.seen:not(.is-in){opacity:.55}
/* 단계 번호를 하나의 흐름(01→02→03→04)으로 강조 */
.ef-flow{display:flex;align-items:center;gap:0;margin:0 0 16px;padding:0;list-style:none}
.ef-flow li{display:flex;align-items:center;gap:8px;color:#6f6785;font-size:13px;font-weight:800}
.ef-flow li+li:before{content:"";width:26px;height:2px;margin:0 10px;border-radius:2px;background:rgba(255,255,255,.14)}
.ef-flow li.done+li:before,.ef-flow li.cur:before{background:linear-gradient(90deg,#a78bfa,#7634CB)}
.ef-flow b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);font-size:12.5px;font-weight:900;color:#8f87a5}
.ef-flow li.done b{border-color:transparent;background:rgba(124,77,255,.35);color:#e6dcff}
.ef-flow li.done{color:#b9b1cc}
.ef-flow li.cur b{width:44px;height:44px;border-color:transparent;background:linear-gradient(135deg,#a78bfa,#7634CB);color:#fff;font-size:18px;box-shadow:0 0 0 6px rgba(124,77,255,.22),0 10px 24px rgba(124,77,255,.45)}
.ef-flow li.cur{color:#fff;font-size:15px}
.ef-flow li:not(.cur) span{display:none}
.ef-flow li.cur span{display:inline}
@media(max-width:900px){.ef-flow li.cur b{width:38px;height:38px;font-size:16px}}
/* 흐름 숫자 옆 텍스트 제거(아래 큰 제목과 중복) */
.ef-flow li span{display:none!important}
/* 노트북 등 낮은 화면에서도 위·아래 여백이 비슷하도록(제목 위 여백을 줄이고 장면 높이를 같은 기준으로 맞춤) */
@media(min-width:901px) and (min-height:600px){
  .ef-head{padding-top:clamp(18px,9vh,120px)!important}
  .ef .dj-screen{height:min(470px,calc(100vh - 66px - var(--efh,190px) - clamp(18px,9vh,120px) - 20px))!important}
}
/* 긴 영역(REAL IMPACT)은 자유 스크롤: 위·아래 여백을 두고, 끝에서 관성으로 바로 페이지가 넘어가지 않게 */
@media(min-width:901px) and (min-height:600px){#impact.section{padding-top:110px!important;padding-bottom:150px!important}}
/* 큰 화면(높이 880px 이상)은 제목을 조금 더 아래로 */
@media(min-width:901px) and (min-height:880px){
  .ef-head{padding-top:clamp(60px,13vh,160px)!important}
  .ef .dj-screen{height:min(500px,calc(100vh - 66px - var(--efh,190px) - clamp(40px,8vh,90px) - 20px))!important}
}
/* 자동 세로 가운데: 제목 위 여백과 장면 높이는 화면 높이에 맞춰 스크립트가 계산(위·아래 여백 동일) */
@media(min-width:901px) and (min-height:600px){
  .ef-head{padding-top:var(--ef-pt,90px)!important}
  .ef .dj-screen{height:var(--ef-sh,440px)!important}
}
/* 단계 번호 흐름과 아래 단계 이름 사이 간격 */
.ef-flow{margin-bottom:34px!important}
/* 정산: 채널 로고를 같은 크기·같은 흰 배경으로 통일 */
.st-r .bk-lg,.st-r .bk-txt{box-sizing:border-box;width:104px!important;height:28px!important;max-width:none;border-radius:8px}
.st-r .bk-lg{padding:5px 10px!important;object-fit:contain;background:#fff!important}
.st-r .bk-txt{display:grid;place-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#f2eff8;font-size:12.5px!important;font-weight:800;letter-spacing:-.02em}
/* FEATURES: 업종 탭과 아래 카드 사이 여백 */
.f7-pills{margin-bottom:30px!important}
/* 판매할 상품권: 실제 모바일 상품권(티켓) 모양으로 */
.f7-vouchers{gap:14px}
.f7-vc{position:relative;display:flex;min-height:104px;padding:0;border:0;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#7a46f0,#4a26b0 55%,#2a1670);box-shadow:0 14px 30px rgba(60,20,150,.4)}
.f7-vc:before,.f7-vc:after{content:"";position:absolute;left:96px;width:20px;height:20px;border-radius:50%;background:#18132a;transform:translateX(-50%);z-index:2}
.f7-vc:before{top:-10px}.f7-vc:after{bottom:-10px}
.f7-vl{flex:0 0 96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-right:2px dashed rgba(255,255,255,.4)}
.f7-vl img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(20,6,60,.5))}
.f7-vl small{padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.2);color:#fff;font-size:11.5px;font-weight:800}
.f7-vr{flex:1;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:14px 18px 12px 22px;min-width:0}
.f7-vb{color:rgba(255,255,255,.7);font-size:11px;font-weight:800;letter-spacing:.06em}
.f7-vr b{color:#fff;font-size:17px;font-weight:900;line-height:1.3;letter-spacing:-.02em}
.f7-bc{display:block;height:16px;margin-top:4px;border-radius:2px;opacity:.55;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px,#fff 4px 5px,transparent 5px 8px,#fff 8px 11px,transparent 11px 13px)}
.f7-vc .f7-vr .f7-bc{flex:none;width:auto!important;height:16px!important;margin-top:4px;border-radius:2px!important;position:static;opacity:.55;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px,#fff 4px 5px,transparent 5px 8px,#fff 8px 11px,transparent 11px 13px)!important}
.f7-vc .f7-vr .f7-bc:after{display:none!important}
.f7-vl img.ph{border-radius:12px;object-fit:cover;filter:none;box-shadow:0 4px 10px rgba(20,6,60,.45)}
.f7-vl img.ph{border-radius:12px;object-fit:cover;filter:none;box-shadow:0 4px 10px rgba(20,6,60,.45)}
.f7-body{grid-template-columns:1.15fr .85fr}
/* 기능이 주인공: 기능 영역을 넓고 크게, 상품권은 보조로 작게 */
.f7-body{grid-template-columns:1.55fr .75fr!important;gap:14px!important;max-width:1060px!important}
.f7-use{background:linear-gradient(160deg,#2a2150,#17122b 70%)!important;border-color:rgba(183,156,255,.4)!important;box-shadow:0 18px 50px rgba(100,50,220,.2)}
.f7-use h4{font-size:20px!important;margin-bottom:8px!important}
.f7-role{font-size:15px!important;margin:0 0 18px!important}
.f7-cards{flex:1;gap:12px!important}
.f7-use{display:flex;flex-direction:column}
.f7-fc{grid-template-columns:96px 1fr!important;gap:18px!important;padding:18px 20px!important;flex:1;align-items:center}
.f7-fc img{width:96px!important;height:96px!important}
.f7-fc h5{font-size:18.5px!important;margin-bottom:6px!important}
.f7-fc p{font-size:14px!important;line-height:1.6!important;color:#cfc7e2!important}
.f7-fc.hot{background:linear-gradient(135deg,rgba(124,77,255,.3),rgba(124,77,255,.1))!important;border-color:rgba(183,156,255,.7)!important}
.f7-chips span{font-size:14px!important;padding:8px 14px!important}
.f7-sell{opacity:.92}
.f7-sell h4{font-size:14px!important;color:#cdc6da!important;margin-bottom:10px!important}
.f7-vc{min-height:72px!important}
.f7-vl{flex-basis:76px!important}
.f7-vc:before,.f7-vc:after{left:76px!important}
.f7-vl img{width:32px!important;height:32px!important}
.f7-vl small{font-size:10.5px!important}
.f7-vr{padding:10px 12px 8px 16px!important;gap:3px!important}
.f7-vr b{font-size:14px!important}
.f7-bc{height:10px!important;margin-top:2px!important}
/* 기능 영역은 적당한 크기로 되돌림 */
.f7-body{grid-template-columns:1.1fr .9fr!important;gap:16px!important;max-width:1000px!important}
.f7-use{background:linear-gradient(160deg,#211c33,#15121f 70%)!important;border-color:rgba(255,255,255,.12)!important;box-shadow:none!important}
.f7-use h4{font-size:17px!important}.f7-role{font-size:14px!important;margin:-6px 0 14px!important}
.f7-fc{grid-template-columns:64px 1fr!important;gap:14px!important;padding:12px 14px!important;flex:none}
.f7-fc img{width:64px!important;height:64px!important}
.f7-fc h5{font-size:15px!important}.f7-fc p{font-size:12.5px!important;line-height:1.5!important;color:#b9b1cc!important}
.f7-chips span{font-size:13px!important;padding:6px 12px!important}
/* 상품권: 실제 모바일 상품권 카드(밝은 카드 + 상단 이미지 + 바코드)를 겹쳐 쌓은 모양 */
.f7-sell{opacity:1!important;background:radial-gradient(80% 60% at 50% 30%,rgba(124,77,255,.25),transparent 70%),linear-gradient(160deg,#211c33,#15121f 70%)!important;overflow:hidden}
.f7-sell h4{font-size:17px!important;color:#fff!important;margin-bottom:14px!important}
.f7-vouchers{position:relative;display:flex;flex-direction:column;align-items:center;padding:6px 0 10px}
.f7-mv{width:min(100%,300px);display:grid;grid-template-columns:96px 1fr;border-radius:18px;overflow:hidden;background:#fff;color:#1b1630;box-shadow:0 14px 28px rgba(0,0,0,.4);animation:f6in .5s ease both}
.f7-mv:not(:first-child){margin-top:-18px}
.f7-mv:nth-child(odd){transform:rotate(-2.2deg) translateX(-8px)}
.f7-mv:nth-child(even){transform:rotate(2deg) translateX(8px)}
.f7-mh{position:relative;display:grid;place-items:center;background:linear-gradient(145deg,#8b5cf6,#5b2bc4)}
.f7-mh img{width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(20,6,60,.5))}
.f7-mh img.ph{border-radius:12px;object-fit:cover}
.f7-mh span{position:absolute;left:8px;top:7px;color:rgba(255,255,255,.85);font-size:10px;font-weight:900;letter-spacing:.06em}
.f7-mb{padding:14px 14px 12px;display:flex;flex-direction:column;gap:3px;min-width:0}
.f7-mb small{color:#7634CB;font-size:11px;font-weight:900}
.f7-mb b{font-size:14.5px;font-weight:900;line-height:1.3;letter-spacing:-.02em;color:#1b1630}
.f7-mb .f7-bc{display:block;height:14px;margin-top:6px;opacity:1;background:repeating-linear-gradient(90deg,#1b1630 0 2px,transparent 2px 4px,#1b1630 4px 5px,transparent 5px 8px,#1b1630 8px 11px,transparent 11px 13px)!important}
.f7-mv{min-height:86px;width:min(100%,320px)}
.f7-mv:not(:first-child){margin-top:-6px}
.f7-vouchers{gap:0;padding-top:10px}
/* 기능 카드만 한 단계 키움 (상품권은 이전 크기 유지) */
.f7-body{grid-template-columns:1.2fr .8fr!important;max-width:1040px!important}
.f7-use h4{font-size:19px!important}
.f7-role{font-size:15px!important}
.f7-fc{grid-template-columns:84px 1fr!important;gap:16px!important;padding:16px 18px!important}
.f7-fc img{width:84px!important;height:84px!important}
.f7-fc h5{font-size:17.5px!important}
.f7-fc p{font-size:13.5px!important;line-height:1.58!important}
.f7-chips span{font-size:13.5px!important;padding:7px 13px!important}
/* 상품권: 폰 화면 안에 큰 상품권 한 장씩 자동으로 넘어감 */
.f7-sell{display:flex!important;flex-direction:column;align-items:stretch}
.f7-vouchers{display:flex!important;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:4px 0 0!important}
.f7-ph{position:relative;width:min(100%,250px);padding:30px 14px 14px;border:3px solid #3a3350;border-radius:34px;background:linear-gradient(#17122b,#0f0b1d);box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08),0 0 60px rgba(124,77,255,.25)}
.f7-nt{position:absolute;left:50%;top:9px;width:64px;height:12px;border-radius:8px;background:#05030c;transform:translateX(-50%)}
.f7-pt{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#fff}
.f7-pt b{font-size:14px;font-weight:900;letter-spacing:-.02em}.f7-pt span{color:#b79cff;font-size:11.5px;font-weight:800}
.f7-big{position:relative;height:196px}
.f7-bv{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 12px 26px rgba(0,0,0,.4);opacity:0;transform:translateX(30px) scale(.96);transition:opacity .5s ease,transform .6s cubic-bezier(.16,.84,.44,1);pointer-events:none}
.f7-bv.on{opacity:1;transform:none;pointer-events:auto}
.f7-bh{position:relative;flex:1;display:grid;place-items:center;background:linear-gradient(145deg,#8b5cf6,#5b2bc4)}
.f7-bh img{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(20,6,60,.5))}
.f7-bh img.ph{border-radius:16px;object-fit:cover}
.f7-bh em{position:absolute;left:12px;top:10px;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.22);color:#fff;font-size:11px;font-style:normal;font-weight:800}
.f7-bb{padding:10px 14px 12px;display:flex;flex-direction:column;gap:2px}
.f7-bb span{color:#7634CB;font-size:10.5px;font-weight:900}
.f7-bb b{color:#1b1630;font-size:15.5px;font-weight:900;line-height:1.3;letter-spacing:-.02em}
.f7-bb .f7-bc{display:block;height:13px;margin-top:5px;background:repeating-linear-gradient(90deg,#1b1630 0 2px,transparent 2px 4px,#1b1630 4px 5px,transparent 5px 8px,#1b1630 8px 11px,transparent 11px 13px)}
.f7-dots{display:flex;justify-content:center;gap:7px;margin-top:12px}
.f7-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.25);cursor:pointer;transition:width .3s,background .3s}
.f7-dots button.on{width:22px;border-radius:5px;background:#a78bfa}
@media(prefers-reduced-motion:reduce){.f7-bv{transition:none}}
/* 폰을 크게, 아래로 내려 영역 아래에서 잘리게 */
.f7-sell{padding-bottom:0!important;overflow:hidden}
.f7-vouchers{align-items:flex-end;padding:0!important}
.f7-ph{width:min(86%,300px)!important;padding:34px 18px 0!important;border-bottom:0!important;border-radius:38px 38px 0 0!important;margin-top:6px;min-height:430px;box-shadow:0 -10px 50px rgba(124,77,255,.3),0 0 0 1px rgba(255,255,255,.08)!important}
.f7-pt{margin-bottom:16px!important}.f7-pt b{font-size:16px!important}.f7-pt span{font-size:12.5px!important}
.f7-big{height:262px!important}
.f7-bh img{width:116px!important;height:116px!important}
.f7-bb{padding:12px 16px 14px!important}.f7-bb b{font-size:18px!important}.f7-bb span{font-size:11.5px!important}
.f7-bb .f7-bc{height:16px!important}
.f7-dots{margin-top:16px!important}
/* 폰을 상품권 영역 가운데로 */
.f7-vouchers{width:100%;justify-content:flex-end!important;align-items:center!important}
.f7-ph{margin-left:auto!important;margin-right:auto!important}
/* 폰 윗부분을 왼쪽 기능 카드 윗선에 맞춤 */
.f7-ph{margin-top:24px!important}
/* 업종마다 영역 높이가 같도록 고정, 폰은 항상 위에서 기능 카드 윗선에 맞춤 */
.f7-vouchers{justify-content:flex-start!important}
.f7-body{height:clamp(400px,calc(100vh - 430px),500px);min-height:0!important;align-items:stretch}
.f7-use{overflow:hidden}
.f7-fc{padding:14px 16px!important}
.f7-fc{grid-template-columns:76px 1fr!important}.f7-fc img{width:76px!important;height:76px!important}
.f7-body{height:480px!important}
.f7-fc{padding:12px 16px!important;grid-template-columns:64px 1fr!important}.f7-fc img{width:64px!important;height:64px!important}
.f7-cards{gap:10px!important}
.f7-pills button{padding:12px 26px!important}
/* 폰 내부를 실제 앱 화면처럼: 상태바·앱 헤더·탭·상품권 상세(유효기간·번호·바코드·사용하기) */
.f7-ph{padding:30px 14px 0!important;background:#f4f2fa!important;border-color:#2b2540!important}
.f7-nt{background:#05030c;top:8px!important}
.f7-sb{position:absolute;left:22px;right:22px;top:9px;display:flex;justify-content:space-between;align-items:center;color:#1b1630;font-size:10.5px;font-weight:800}
.f7-sb span{display:flex;gap:2px;align-items:flex-end}
.f7-sb u{display:block;width:3px;background:#1b1630;border-radius:1px}.f7-sb u:nth-child(1){height:4px}.f7-sb u:nth-child(2){height:6px}.f7-sb u:nth-child(3){height:8px}
.f7-sb s{display:block;width:16px;height:8px;margin-left:3px;border:1.5px solid #1b1630;border-radius:3px;background:linear-gradient(90deg,#1b1630 70%,transparent 70%)}
.f7-ah{display:flex;justify-content:space-between;align-items:center;margin:6px 0 8px;color:#1b1630}
.f7-ah em{font-size:22px;font-style:normal;line-height:1;width:20px}.f7-ah b{font-size:14.5px;font-weight:900}.f7-ah span{width:20px}
.f7-tabs2{display:flex;gap:6px;margin-bottom:10px}
.f7-tabs2 b{padding:5px 11px;border-radius:999px;background:#e6e1f3;color:#7a7390;font-size:11px;font-weight:800}
.f7-tabs2 b.on{background:#7634CB;color:#fff}.f7-tabs2 b i{font-style:normal;margin-left:3px;opacity:.85}
.f7-big{height:292px!important}
.f7-bv{border-radius:16px!important;box-shadow:0 8px 22px rgba(60,30,140,.25)!important;background:#fff}
.f7-bh{flex:none!important;height:112px;background:linear-gradient(145deg,#8b5cf6,#5b2bc4)}
.f7-bh img{width:84px!important;height:84px!important}
.f7-bh span{position:absolute;right:12px;top:10px;color:rgba(255,255,255,.85);font-size:10.5px;font-weight:900;letter-spacing:.05em}
.f7-bb{padding:10px 14px 12px!important;gap:3px!important}
.f7-bb b{font-size:15.5px!important;color:#1b1630}
.f7-bb p{margin:0;color:#8a839e;font-size:11px;font-weight:700}
.f7-bn{display:flex;flex-direction:column;gap:3px;margin-top:5px}
.f7-bn .f7-bc{display:block;height:20px!important;margin:0!important}
.f7-bn small{text-align:center;color:#8a839e;font-size:10px;font-weight:700;letter-spacing:.04em}
.f7-use2{margin-top:6px;padding:8px 0;border-radius:10px;background:#7634CB;color:#fff;text-align:center;font-size:12.5px;font-weight:900}
.f7-dots{margin-top:12px!important}
.f7-dots button{background:rgba(27,22,48,.18)!important}.f7-dots button.on{background:#7634CB!important}
/* 왼쪽 페이지 인덱스 */
.pidx{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:45;display:none;flex-direction:column;gap:4px}
@media(min-width:1180px) and (min-height:600px){.pidx{display:flex}}
.pidx button{display:flex;align-items:center;gap:10px;padding:5px 8px 5px 0;border:0;background:none;cursor:pointer;color:rgba(255,255,255,.4);font:800 12px/1 inherit}
.pidx button i{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25);transition:background .25s,transform .25s}
.pidx button span{opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s;white-space:nowrap}
.pidx button:hover span,.pidx button.on span{opacity:1;transform:none}
.pidx button.on{color:#fff}.pidx button.on i{background:#a78bfa;transform:scale(1.5);box-shadow:0 0 0 4px rgba(167,139,250,.25)}
.pidx button:hover i{background:#fff}
/* 분석 결과: 시장 분석·회사 현황은 요약만 */
.sc-more{margin-top:8px;padding:5px 12px;border:1px solid rgba(183,156,255,.45);border-radius:999px;background:rgba(124,77,255,.14);color:#6a2fc0;font:800 12px/1 inherit;cursor:pointer}
html[data-theme="dark"] .sc-more{color:#d9c8ff}
.sc-more:hover{background:rgba(124,77,255,.28)}
/* 폰 안: 상품이 들어오면 모바일 상품권으로 바뀌는 애니메이션 */
.f7-big{height:300px!important}
.f7-flip{position:absolute;inset:0;border-radius:16px;overflow:hidden}
.f7-bv{background:transparent!important;box-shadow:none!important;overflow:visible!important}
.f7-pd{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px;border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(60,30,140,.18);transition:opacity .45s ease,transform .6s cubic-bezier(.16,.84,.44,1)}
.f7-pi{width:120px;height:120px;border-radius:18px;background:#efeaf9;display:grid;place-items:center}
.f7-pi img{width:92px;height:92px;object-fit:contain}.f7-pi img.ph{border-radius:12px;object-fit:cover}
.f7-ptag{padding:3px 10px;border-radius:999px;background:#e6e1f3;color:#6a2fc0;font-size:11px;font-weight:900}
.f7-pd b{color:#1b1630;font-size:16px;font-weight:900}.f7-pd p{margin:0;color:#8a839e;font-size:11.5px;font-weight:700}
.f7-vx{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 10px 26px rgba(60,30,140,.3);opacity:0;transform:scale(.88) rotate(-3deg);transition:opacity .5s ease,transform .7s cubic-bezier(.16,.84,.44,1)}
.f7-bv.vch .f7-pd{opacity:0;transform:scale(1.08) translateY(-14px)}
.f7-bv.vch .f7-vx{opacity:1;transform:none}
.f7-ok2{align-self:flex-start;padding:2px 9px;border-radius:999px;background:#e8f7ef;color:#1f8a57;font-size:10.5px;font-weight:900}
.f7-bb{gap:4px!important;padding:10px 14px 12px!important}
.f7-bh{height:120px!important}
.f7-use2,.f7-tabs2,.f7-dots{display:none!important}
.f7-bn .f7-bc{height:22px!important}
/* 모니모식: 상품이 오른쪽에서 폰 안으로 쏙 들어온 뒤 상품권으로 변신 */
.f7-ph{overflow:visible!important}
.f7-big{overflow:visible}
@keyframes f7-in{0%{opacity:0;transform:translateX(230px) rotate(10deg) scale(.82)}60%{opacity:1;transform:translateX(-8px) rotate(-1.5deg) scale(1.02)}100%{opacity:1;transform:none}}
.f7-bv.on:not(.vch) .f7-pd{animation:f7-in .85s cubic-bezier(.2,.8,.25,1) both}
.f7-bv.on .f7-pi img{animation:f7-pop .6s .55s ease both}
@keyframes f7-pop{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:none}}
.f7-bv.vch .f7-vx{animation:f7-flash .7s ease}
@keyframes f7-flash{0%{filter:brightness(1.5)}100%{filter:none}}
.f7-sell{overflow:hidden}
@media(prefers-reduced-motion:reduce){.f7-bv.on:not(.vch) .f7-pd,.f7-bv.on .f7-pi img,.f7-bv.vch .f7-vx{animation:none}}
/* 모니모식 최종: 카드가 들어오는 게 아니라 아이콘(PNG)만 오른쪽에서 쏙 들어와 안착하면 상품권이 완성됨 */
.f7-pd{display:none!important}
.f7-flip{display:none}
.f7-vx{opacity:1!important;transform:none!important;animation:none!important;overflow:visible;border-radius:16px}
.f7-bh{border-radius:16px 16px 0 0;overflow:visible!important}
.f7-bh img{position:relative;z-index:3;opacity:0}
.f7-bv.fly .f7-bh img{animation:f7-fly .95s cubic-bezier(.2,.8,.25,1) both}
.f7-bv.vch .f7-bh img{opacity:1;animation:none}
@keyframes f7-fly{0%{opacity:0;transform:translateX(300px) rotate(18deg) scale(.7)}35%{opacity:1}70%{transform:translateX(-10px) rotate(-3deg) scale(1.12)}100%{opacity:1;transform:none}}
.f7-bh em,.f7-bh span{opacity:0;transition:opacity .4s ease .1s}
.f7-bv.vch .f7-bh em,.f7-bv.vch .f7-bh span{opacity:1}
/* 아이콘이 오기 전 상품권은 빈 틀(스켈레톤) */
.f7-bb>*{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .5s ease}
.f7-bb>*:nth-child(2){transition-delay:.08s}.f7-bb>*:nth-child(3){transition-delay:.16s}.f7-bb>*:nth-child(4){transition-delay:.26s}
.f7-bv.vch .f7-bb>*{opacity:1;transform:none}
.f7-bb{position:relative}
.f7-bb:before{content:"";position:absolute;left:14px;right:34px;top:14px;height:12px;border-radius:6px;background:#ebe7f5;box-shadow:0 22px 0 -2px #f1eef8,0 44px 0 -2px #f1eef8;transition:opacity .3s}
.f7-bv.vch .f7-bb:before{opacity:0}
.f7-bv.fly:not(.vch) .f7-bb:before{animation:f7-sk 1s ease-in-out infinite}
@keyframes f7-sk{50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){.f7-bv.fly .f7-bh img{animation:none;opacity:1}}

/* 분석 결과: 시장 분석·회사 현황은 한 줄 요약 + 부드럽게 펼쳐지는 자세히 보기 */
.sc-done{margin-left:8px;padding:2px 8px;border-radius:999px;background:rgba(58,165,106,.16);color:#5fd49a;font-size:11px;font-weight:800;vertical-align:1px;animation:sc-in .45s ease both}
.sc-more{display:inline-flex;align-items:center;gap:4px;margin:8px 0 0;padding:2px 0;border:0;background:none;color:#a78bfa;font:800 12.5px/1.2 inherit;cursor:pointer;animation:sc-in .5s .1s ease both}
.sc-more svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s ease}
.sc-more:hover{color:#d9c8ff}
.open .sc-more svg{transform:rotate(180deg)}
.sc-extra{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.16,.84,.44,1)}
.sc-extra>ul{min-height:0;overflow:hidden;margin:0;padding:0;list-style:none}
.sc-extra li{opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .45s ease}
.open .sc-extra{grid-template-rows:1fr}
.open .sc-extra li{opacity:1;transform:none}
.open .sc-extra li:nth-child(2){transition-delay:.05s}.open .sc-extra li:nth-child(3){transition-delay:.1s}.open .sc-extra li:nth-child(4){transition-delay:.15s}.open .sc-extra li:nth-child(n+5){transition-delay:.2s}
.sc-modal .sc2-out>section{animation:sc-in .55s ease both}
.sc-modal .sc2-out>section:nth-child(2){animation-delay:.12s}.sc-modal .sc2-out>section:nth-child(3){animation-delay:.24s}
@keyframes sc-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html:not([data-theme="dark"]) .sc-done{color:#1f8a57}html:not([data-theme="dark"]) .sc-more{color:#6a2fc0}
@media(prefers-reduced-motion:reduce){.sc-extra,.sc-extra li,.sc-more svg{transition:none}.sc-modal .sc2-out>section,.sc-done,.sc-more{animation:none}}
/* 발행할 수 있는 상품권 목록(누르면 폰에서 해당 상품권이 만들어짐) */
.f7-body{height:520px!important}
.f7-list{display:flex;flex-direction:column;gap:6px;width:100%;margin:0 0 4px}
.f7-list button{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 8px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.04);color:#bdb5d1;font:800 13px/1.2 inherit;text-align:left;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s}
.f7-list button i{flex:0 0 auto;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.12);font-style:normal;font-size:11px;font-weight:900}
.f7-list button:hover{color:#fff;border-color:rgba(167,139,250,.6);transform:translateX(3px)}
.f7-list button.on{background:rgba(124,77,255,.28);border-color:rgba(183,156,255,.7);color:#fff}
.f7-list button.on i{background:#a78bfa;color:#1b0f3a}
.f7-sell{align-items:stretch}
.f7-vouchers{align-items:stretch!important;justify-content:flex-start!important}
.f7-ph{margin-top:10px!important}
.f7-big{height:262px!important}
.f7-bh{height:100px!important}.f7-bh img{width:76px!important;height:76px!important}
/* 상품권 목록은 바깥 띠(가로 칩)로, 폰 영역은 작게 */
.f7-strip{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 14px;max-width:1040px;margin:0 auto 14px}
.f7-strip h4{margin:0;color:#fff;font-size:15px;font-weight:900;letter-spacing:-.02em}
.f7-strip .f7-list{flex-direction:row!important;flex-wrap:wrap;justify-content:center;width:auto!important;margin:0!important;gap:8px!important}
.f7-strip .f7-list button{padding:6px 14px 6px 8px!important;border-radius:999px!important;font-size:12.5px!important}
.f7-strip .f7-list button:hover{transform:translateY(-2px)!important}
.f7-body{height:420px!important;grid-template-columns:1.25fr .75fr!important}
.f7-sell h4{display:none}
.f7-sell{padding:14px 14px 0!important}
.f7-ph{margin-top:0!important;width:min(92%,250px)!important}
.f7-big{height:236px!important}
.f7-bh{height:88px!important}.f7-bh img{width:66px!important;height:66px!important}
.f7-bb b{font-size:16px!important}
/* 캐러셀만: 목록 띠 제거, 폰 위 작은 점으로 위치 표시(누르면 이동) */
.f7-sell h4{display:block!important;font-size:17px!important}
.f7-sell{padding:20px 22px 0!important}
.f7-cd{display:flex;justify-content:center;gap:7px;margin:2px 0 12px}
.f7-cd button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.28);cursor:pointer;transition:width .3s,background .3s}
.f7-cd button.on{width:24px;border-radius:5px;background:#a78bfa}
.f7-body{height:460px!important}
.f7-ph{width:min(86%,270px)!important}
.f7-big{height:262px!important}
.f7-bh{height:100px!important}.f7-bh img{width:76px!important;height:76px!important}
/* 점은 폰 안 상품권 카드 아래 */
.f7-ph .f7-cd{margin:12px 0 0!important}
.f7-ph .f7-cd button{background:rgba(27,22,48,.2)}.f7-ph .f7-cd button.on{background:#7634CB}
.f7-bb{padding-top:12px!important}
/* 폰 윗선을 왼쪽 기능 카드 윗선에 맞추고, 상품권 하단 여백 줄임 */
.f7-ph{margin-top:30px!important}
.f7-big{height:214px!important}
.f7-bb{padding-bottom:10px!important}
/* 노출 확대 애니메이션: 반복 재생 + 채널 칩 통일(같은 흰 배경·같은 크기) */
.imp-x .xs{animation-iteration-count:infinite!important;animation-duration:9s!important}
@keyframes xs4{0%,66%{opacity:0;transform:translateY(10px)}71%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(-8px)}}
.imp-x .xch{gap:8px!important}
.imp-x .xch span,html[data-theme="dark"] .imp-x .xch span,.imp-x .xch span.pg{box-sizing:border-box;display:flex!important;align-items:center;justify-content:center;gap:6px;width:128px!important;height:34px!important;padding:0 10px;border-radius:10px;background:#fff!important;border:1px solid rgba(255,255,255,.35)!important;color:#4a1f9a;font-size:12.5px;font-weight:800;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.imp-x .xch span img{width:auto!important;height:auto!important;max-width:84px!important;max-height:20px!important;object-fit:contain}
.imp-x .xch span.pg img.mall{max-width:26px!important;max-height:26px!important}
.imp-x .xch span.pg b{font-size:12.5px;font-weight:800}
/* 폰기프트몰: 흰 로고라서 브랜드 보라 칩에 */
.imp-x .xch span.pg,html[data-theme="dark"] .imp-x .xch span.pg{background:linear-gradient(135deg,#8b5cf6,#5b2bc4)!important;border-color:transparent!important}
.imp-x .xch span.pg img.plogo{max-width:78px!important;max-height:20px!important}
/* 폰기프트몰 칩: 전달받은 몰 아이콘(SVG) + 텍스트, 다른 채널과 같은 흰 칩 */
.imp-x .xch span.pg,html[data-theme="dark"] .imp-x .xch span.pg{background:#fff!important;border:1px solid rgba(255,255,255,.35)!important;color:#5c24a5}
.imp-x .xch span.pg img.mall{width:22px!important;height:22px!important;max-width:22px!important;max-height:22px!important}
.imp-x .xch span.pg b{color:#4a1f9a;font-size:12.5px;font-weight:800}
.imp-x .xch span.pg b,html[data-theme="dark"] .imp-x .xch span.pg b{color:#111!important}
/* 리스크 감소: 반복 재생 (7초 주기: 판매 완료·0원 → 사용 완료·수수료 발생 → 사라졌다가 처음으로) */
.imp-r.rk2 .tk{animation:tk-card 7s ease-in-out infinite!important}
.imp-r.rk2 .tk-st .a,.imp-r.rk2 .tk-v .v0,.imp-r.rk2 .tk-cap .c0{opacity:1;animation:tk-A 7s ease infinite!important}
.imp-r.rk2 .tk-st .b,.imp-r.rk2 .tk-v .v1,.imp-r.rk2 .tk-cap .c1{opacity:0;animation:tk-B 7s ease infinite!important}
@keyframes tk-card{0%{opacity:0;transform:translateY(10px);border-top-color:#7634CB}7%,93%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(-6px)}0%,44%{border-top-color:#7634CB}47%,100%{border-top-color:#ff8a3d}}
@keyframes tk-A{0%,42%{opacity:1;transform:none}47%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes tk-B{0%,44%{opacity:0;transform:translateY(6px)}50%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.imp-r.rk2 .tk,.imp-r.rk2 .tk *{animation:none!important}.imp-r.rk2 .tk-st .a,.imp-r.rk2 .tk-v .v0,.imp-r.rk2 .tk-cap .c0{opacity:0}.imp-r.rk2 .tk-st .b,.imp-r.rk2 .tk-v .v1,.imp-r.rk2 .tk-cap .c1{opacity:1}}
/* 캐러셀 좌우 화살표 */
.f7-vouchers{position:relative}
.f7-ar{position:absolute;top:44%;z-index:6;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(18,13,31,.75);backdrop-filter:blur(6px);color:#fff;cursor:pointer;transition:background .25s,transform .25s,border-color .25s}
.f7-ar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.f7-ar:hover{background:#7634CB;border-color:transparent;transform:scale(1.08)}
.f7-ar:active{transform:scale(.94)}
.f7-pv{left:4px}.f7-nx{right:4px}
.f7-ar:focus-visible{outline:2px solid #c6a6ff;outline-offset:2px}
/* 긴 영역(REAL IMPACT 등)에서 스크롤 후 저절로 다음/이전 페이지로 끌려가던 CSS 스냅 해제(휠 페이징은 스크립트가 담당) */
html{scroll-snap-type:none!important}
/* 섹션 위 작은 영문 라벨 삭제 */
#impact .kicker,#features .kicker,#partners .kicker,#pricing .kicker{display:none!important}
/* 섹션 제목·설명 글자 크기 통일 (HERO·2번 소개 제외): 제목 44px / 설명 17px */
#impact .section-head h2,#features .section-head h2,#partners .section-head h2,#pricing .section-head h2,#faq .section-head h2{font-size:44px!important;font-weight:800!important;line-height:1.25!important;letter-spacing:-.035em!important}
#impact .section-head > p:not(.kicker),#features .section-head > p:not(.kicker),#partners .section-head > p:not(.kicker),#pricing .section-head > p:not(.kicker),#faq .section-head > p:not(.kicker){font-size:17px!important;line-height:1.65!important}
@media(max-width:900px){#impact .section-head h2,#features .section-head h2,#partners .section-head h2,#pricing .section-head h2,#faq .section-head h2{font-size:30px!important}}
/* 섹션 제목 키움: 54px / 설명 18px */
#impact .section-head h2,#features .section-head h2,#partners .section-head h2,#pricing .section-head h2,#faq .section-head h2{font-size:54px!important}
#impact .section-head > p:not(.kicker),#features .section-head > p:not(.kicker),#partners .section-head > p:not(.kicker),#pricing .section-head > p:not(.kicker),#faq .section-head > p:not(.kicker){font-size:18px!important}
@media(max-width:900px){#impact .section-head h2,#features .section-head h2,#partners .section-head h2,#pricing .section-head h2,#faq .section-head h2{font-size:34px!important}}
/* 제목 50px / 설명 17px로 조정(54px는 낮은 화면에서 활용 영역이 너무 줄어듦) */
#impact .section-head h2,#features .section-head h2,#partners .section-head h2,#pricing .section-head h2,#faq .section-head h2{font-size:50px!important}
#impact .section-head > p:not(.kicker),#features .section-head > p:not(.kicker),#partners .section-head > p:not(.kicker),#pricing .section-head > p:not(.kicker),#faq .section-head > p:not(.kicker){font-size:17px!important}
@media(min-width:901px) and (min-height:600px){#features .section-head{margin-bottom:0!important}#features .section-head > p:not(.kicker){margin-top:10px!important}#features .f7-pills{margin-top:14px!important;margin-bottom:18px!important}}
@media(max-width:900px){#impact .section-head h2,#features .section-head h2,#partners .section-head h2,#pricing .section-head h2,#faq .section-head h2{font-size:34px!important}}
/* 마무리 영역: 블로그·인스타그램 최신글 */
.cl-feed{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;width:min(100%,860px);margin:30px auto 0;text-align:left}
.cl-col{padding:16px 18px 18px;border:1px solid rgba(255,255,255,.14);border-radius:20px;background:rgba(255,255,255,.05)}
.cl-col header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.cl-col header b{color:#fff;font-size:15.5px;font-weight:900;letter-spacing:-.02em}
.cl-col header a{color:#b79cff;font-size:12.5px;font-weight:800;text-decoration:none}.cl-col header a i{font-style:normal;display:inline-block;transition:transform .25s}.cl-col header a:hover i{transform:translateX(3px)}
.cl-posts{display:grid;gap:10px}
.cl-col[data-feed="blog"] .cl-posts{grid-template-columns:1fr 1fr}
.cl-col[data-feed="insta"] .cl-posts{grid-template-columns:1fr 1fr}
.cl-post{display:flex;flex-direction:column;gap:8px;color:#fff;text-decoration:none;transition:transform .3s}
.cl-post:hover{transform:translateY(-3px)}
.cl-th{overflow:hidden;border-radius:12px;background:linear-gradient(135deg,rgba(124,77,255,.35),rgba(255,255,255,.06));aspect-ratio:16/10}
.cl-ig .cl-th{aspect-ratio:1}
.cl-th img{display:block;width:100%;height:100%;object-fit:cover}
.cl-ph{display:block;width:100%;height:100%}
.cl-tx b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#fff;font-size:13px;font-weight:800;line-height:1.45}
.cl-tx small{display:block;margin-top:3px;color:rgba(255,255,255,.55);font-size:11.5px;font-weight:700}
@media(max-width:700px){.cl-feed{grid-template-columns:1fr}}
/* 최신글 영역을 마무리 문구 위로 */
.closing .cl-feed{margin:0 auto 44px}
.closing .cl-feed + img{margin-top:0}
.closing .cl-feed{margin:0 auto 26px}
.cl-th{aspect-ratio:16/8}.cl-ig .cl-th{aspect-ratio:16/8}
.cl-col{padding:14px 16px 14px}
/* 마무리 문구를 띠배너(마퀴)로 */
.cl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.closing{overflow:hidden}
.cl-band{position:relative;width:100vw;margin:0 0 34px calc(50% - 50vw);padding:18px 0;overflow:hidden;background:linear-gradient(90deg,#4b1d92,#7634CB 50%,#4b1d92);border-top:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22);transform:rotate(-1.2deg) scale(1.02);box-shadow:0 18px 50px rgba(100,50,220,.35)}
.cl-track{display:flex;align-items:center;gap:34px;width:max-content;animation:cl-run 28s linear infinite}
.cl-it{color:rgba(255,255,255,.85);font-size:20px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.cl-it.big{color:#fff;font-size:34px;font-weight:900;letter-spacing:-.04em}
.cl-it em{color:#ffd9ff;font-style:normal}
.cl-st{color:#ffd166;font-size:22px;font-style:normal}
@keyframes cl-run{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.cl-track{animation:none}.cl-band{overflow-x:auto}}
@media(max-width:700px){.cl-it.big{font-size:24px}.cl-it{font-size:15px}.cl-band{padding:12px 0}}
.closing .cl-feed + .cl-sr + .cl-band{margin-top:30px}
.cl-band{width:calc(100vw / var(--cz,1))!important;margin-left:calc(50% - 50vw / var(--cz,1))!important}
/* 띠배너를 깔끔하게: 기울임·그라데이션·그림자 제거, 얇은 선 사이로 천천히 흐르는 텍스트 */
.cl-band{background:none!important;box-shadow:none!important;transform:none!important;border-top:1px solid rgba(255,255,255,.14)!important;border-bottom:1px solid rgba(255,255,255,.14)!important;padding:20px 0!important;margin-bottom:38px!important}
.cl-track{gap:40px;animation-duration:46s}
.cl-it{color:rgba(255,255,255,.5);font-size:18px;font-weight:600}
.cl-it.big{color:#fff;font-size:26px;font-weight:800;letter-spacing:-.03em}
.cl-it em{color:#b79cff}
.cl-st{width:5px;height:5px;border-radius:50%;background:rgba(183,156,255,.7);font-size:0;color:transparent}
.cl-band{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
/* FAQ: 작은 라벨 대신 배경에 은은하게 깔리는 큰 글자 */
#faq .kicker{display:none!important}
#faq .section-head{position:relative;isolation:isolate}
#faq .section-head:before{content:"FAQ";position:absolute;left:-14px;top:-34px;z-index:-1;color:rgba(167,139,250,.09);font-size:190px;font-weight:900;line-height:1;letter-spacing:-.06em;pointer-events:none;user-select:none}
@media(max-width:900px){#faq .section-head:before{font-size:110px;top:-20px}}
#faq .section-head:before{top:-6px;left:-8px;font-size:150px;color:rgba(167,139,250,.07)}
/* 마무리 문구: 움직이지 않는 깔끔한 한 줄 (얇은 선 위·아래, 가운데 정렬) */
.cl-line{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:6px 22px;width:min(100%,860px);margin:0 auto 34px;padding:26px 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.cl-line p{margin:0;color:rgba(255,255,255,.6);font-size:18px;font-weight:600}
.cl-line h2{margin:0!important;color:#fff;font-size:34px!important;font-weight:800!important;letter-spacing:-.04em;line-height:1.25!important}
.cl-line h2 em{color:#b79cff;font-style:normal}
@media(max-width:700px){.cl-line h2{font-size:26px!important}.cl-line p{width:100%;text-align:center}.cl-line{justify-content:center}}
.cl-band,.cl-track{display:none!important}
/* 마무리: 문구 + 서비스 소개서 버튼을 한 카드로 */
.cl-line,.cl-band,.cl-track{display:none!important}
.cl-card{display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(100%,860px);margin:0 auto;padding:30px 36px;border:1px solid rgba(183,156,255,.3);border-radius:24px;background:linear-gradient(135deg,rgba(124,77,255,.22),rgba(255,255,255,.04) 70%);text-align:left}
.cl-msg p{margin:0 0 6px;color:rgba(255,255,255,.65);font-size:16px;font-weight:600}
.cl-msg h2{margin:0!important;color:#fff;font-size:32px!important;font-weight:800!important;letter-spacing:-.04em;line-height:1.25!important}
.cl-msg h2 em{color:#c4aaff;font-style:normal}
.cl-card .btn{flex:0 0 auto;margin:0!important}
@media(max-width:760px){.cl-card{flex-direction:column;align-items:flex-start;padding:24px}.cl-msg h2{font-size:26px!important}.cl-card .btn{width:100%;justify-content:center}}
/* FAQ 배경 글자: 더 또렷하게 */
#faq .section-head:before{top:-14px!important;left:-10px!important;font-size:170px!important;color:rgba(167,139,250,.16)!important;z-index:0!important}
#faq .section-head>*{position:relative;z-index:1}
/* 마무리: 블로그·인스타그램 영역을 넓게, 문구 카드와는 간격을 두고 */
.cl-feed{width:min(100%,1080px)!important;grid-template-columns:1.6fr 1fr!important;gap:20px!important}
.closing .cl-feed{margin:0 auto 72px!important}
.cl-card{width:min(100%,1080px)!important}
.cl-col{padding:20px 22px 22px!important}
.cl-th,.cl-ig .cl-th{aspect-ratio:16/9!important}
.cl-tx b{font-size:14px!important}
.cl-col[data-feed="insta"] .cl-posts{grid-template-columns:1fr!important}
.cl-prof{display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;background:linear-gradient(135deg,rgba(124,77,255,.28),rgba(255,255,255,.05));color:#fff;text-decoration:none;transition:transform .3s,background .3s}
.cl-prof:hover{transform:translateY(-3px)}
.cl-av{flex:0 0 auto;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#8b5cf6,#5b2bc4)}
.cl-av img{width:36px;height:auto}
.cl-hd{flex:1;min-width:0}.cl-hd b{display:block;font-size:15.5px;font-weight:900}.cl-hd small{display:block;margin-top:3px;color:rgba(255,255,255,.62);font-size:12px;font-weight:700}
.cl-go{flex:0 0 auto;padding:8px 16px;border-radius:999px;background:#fff;color:#5c24a5;font-size:13px;font-weight:800}
/* FAQ 배경 글자: 제목 왼쪽 위에 살짝 걸치게 */
#faq .section-head:before{top:-58px!important;left:-6px!important;font-size:120px!important;color:rgba(167,139,250,.22)!important}
.cl-th img{object-position:50% 45%}
/* 블로그·인스타 정렬 + 썸네일 색 반전 필터 해제 */
.cl-th img,.cl-ig3 img{filter:none!important}
.cl-col{display:flex;flex-direction:column}
.cl-col .cl-posts{flex:1}
.cl-col[data-feed="insta"] .cl-posts{display:flex!important;flex-direction:column;gap:12px}
.cl-ig3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cl-ig3 a{display:block;overflow:hidden;border-radius:12px;aspect-ratio:1;background:rgba(255,255,255,.06);transition:transform .3s}
.cl-ig3 a:hover{transform:translateY(-3px)}
.cl-ig3 img{display:block;width:100%;height:100%;object-fit:cover}
.cl-col header a{white-space:nowrap}
/* 01~04 숫자 클릭 가능 */
.ef-flow li{cursor:pointer;border-radius:999px}
.ef-flow li b{transition:transform .25s,background .25s,border-color .25s,color .25s}
.ef-flow li:not(.cur):hover b{transform:scale(1.12);border-color:#a78bfa;color:#fff;background:rgba(124,77,255,.35)}
.ef-flow li:focus-visible{outline:2px solid #c6a6ff;outline-offset:4px}
.ef-flow li:active b{transform:scale(.94)}
/* 진행 표시를 카드 밑줄 대신 현재 단계 숫자 둘레의 링으로 */
.ef-methods button:after{display:none!important}
.ef-flow li.cur b{position:relative;overflow:visible}
.ef-flow li.cur b{box-shadow:0 10px 24px rgba(124,77,255,.45)}
/* 링은 단계 전체(방식 3가지)를 한 바퀴로: 방식이 바뀔 때 처음으로 돌아가지 않고 1/3 → 2/3 → 한 바퀴로 이어서 차오름 */
/* 진행 표시: 숫자 링 대신, 방식 목록 왼쪽의 세로 진행선(3가지 방식에 걸쳐 위→아래로 이어서 차오름) */
.ef-flow li.cur b:after{display:none!important}
.ef-methods{position:relative;padding-left:22px!important}
.ef-methods:before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;border-radius:2px;background:rgba(255,255,255,.14)}
.ef-methods:after{content:"";position:absolute;left:5px;top:6px;width:2px;border-radius:2px;background:linear-gradient(#d9c8ff,#a78bfa);height:0;box-shadow:0 0 10px rgba(167,139,250,.6)}
.ef-stage.run .ef-methods:after{animation:ef-vbar var(--dur) linear forwards}
@keyframes ef-vbar{from{height:calc((100% - 12px) * var(--q0n,0))}to{height:calc((100% - 12px) * var(--q1n,1))}}
.ef-stage:not(.run) .ef-methods:after{height:calc(100% - 12px)}
@media(prefers-reduced-motion:reduce){.ef-stage.run .ef-methods:after{animation:none;height:calc(100% - 12px)}}
/* 진행 표시: 처음 방식으로 복귀 — 방식 카드 안 아래쪽 선이 흐름(숫자 링·세로선 해제) */
.ef-flow li.cur b:after{display:none!important}
.ef-methods:before,.ef-methods:after{display:none!important;content:none!important}
.ef-methods{padding-left:0!important}
.ef-methods button:after{display:block!important}
/* 유통채널 노출: 모바일 상품권 안 글자를 가운데 정렬 */
.bk-v{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:12px 14px!important}
.bk-v b{margin-top:0!important;font-size:18px;line-height:1.2}
/* 기능 카드: 업종 상관없이 같은 크기(조금 키움), 3장까지 들어가는 높이를 확보해 "함께 쓰는 기능" 위치를 고정 */
.f7-cards{flex:none!important;display:flex;flex-direction:column;gap:12px!important;min-height:calc(3 * 104px + 2 * 12px)}
.f7-fc{flex:none!important;height:104px;grid-template-columns:70px 1fr!important;padding:14px 18px!important;align-items:center}
.f7-fc img{width:70px!important;height:70px!important}
.f7-fc h5{font-size:16px!important}
.f7-fc p{font-size:13px!important;line-height:1.5!important}
.f7-use{display:flex!important;flex-direction:column}
.f7-chips{margin-top:auto!important;padding-top:14px}
.f7-body{height:500px!important}
.f7-chips{padding-bottom:2px}
/* 좌우 콘텐츠 폭 통일: 모든 영역이 같은 1120px 폭(양쪽 여백 동일) */
:root{--cw:1120px}
.ef{max-width:var(--cw)!important}
.sc2-win{max-width:var(--cw)!important}
.f7-body{max-width:var(--cw)!important;width:100%}
.cl-feed,.cl-card{width:min(100%,var(--cw))!important}
.feat-v3,.f3-stack{max-width:var(--cw)}
/* 서비스 소개서 다운로드 버튼: 보라 채움 + 다운로드 아이콘 */
.cl-card .btn.white{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 30px 0 32px;border:0;border-radius:999px;background:linear-gradient(135deg,#9d6dff,#7634CB 60%,#5b2bc4);color:#fff!important;font-size:16px;font-weight:800;letter-spacing:-.01em;box-shadow:0 14px 30px rgba(124,77,255,.45),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .25s,box-shadow .25s,filter .25s;white-space:nowrap}
.cl-card .btn.white svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.cl-card .btn.white:hover{transform:translateY(-3px);box-shadow:0 20px 38px rgba(124,77,255,.55),inset 0 1px 0 rgba(255,255,255,.4);filter:brightness(1.06)}
.cl-card .btn.white:hover svg{transform:translateY(2px)}
.cl-card .btn.white:active{transform:translateY(0) scale(.98)}
@media(max-width:760px){.cl-card .btn.white{width:100%;justify-content:center}}
/* 폭 보정: 화면 맞춤 축소(zoom)가 걸려도 블록이 컨테이너 폭을 그대로 채우도록 */
.sc2-win{max-width:none!important}
#features .f7-body{max-width:none!important}
.closing .cl-feed,.closing .cl-card{width:100%!important;max-width:none!important}
/* 호텔 패키지(침대+뷔페) 합성 아이콘은 가로로 넓게 보이도록 */
.f7-bh img.wide{width:auto!important;height:88px!important;max-width:150px!important}
/* 분석 결과 "자세히 보기": 글자 작게, 가운데 정렬 */
.sc-more{display:flex!important;align-items:center;justify-content:center;gap:3px;margin:12px auto 0!important;padding:4px 10px!important;font-size:11px!important;font-weight:700!important}
.sc-more svg{width:12px!important;height:12px!important}
/* 노트북(낮은 화면)에서 섹션 제목·설명이 너무 크지 않도록 화면 높이에 비례 (최대 50px/17px, 최소 30px/14px) */
@media(min-width:901px){
#impact .section-head h2,#features .section-head h2,#partners .section-head h2,#pricing .section-head h2,#faq .section-head h2{font-size:clamp(30px,4.6vh,50px)!important}
#impact .section-head > p:not(.kicker),#features .section-head > p:not(.kicker),#partners .section-head > p:not(.kicker),#pricing .section-head > p:not(.kicker),#faq .section-head > p:not(.kicker){font-size:clamp(14px,1.9vh,17px)!important}
.ef-text h3{font-size:clamp(26px,3.6vh,38px)!important}
.hero .sc2 h1{font-size:clamp(32px,5vh,54px)!important}
}
/* 상단 메뉴: 도입 문의(보조 버튼) + 서비스 신청(주 버튼) */
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-actions .ghost-nav{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.32)!important;box-shadow:none!important}
.nav-actions .ghost-nav:hover{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.6)!important}
/* ===== 분석 모달: 세로 배치(위: 폰기프트 협업 전략 → 아래: 시장 분석, 회사 현황) ===== */
.sc-modal .sc2-out{grid-template-columns:1fr!important}
.sc-modal .sc2-out>section[data-k="strategy"]{border-color:rgba(183,156,255,.55)!important;background:linear-gradient(160deg,rgba(124,77,255,.2),rgba(255,255,255,.04))!important;padding:16px 18px 18px!important}
.sc-modal .sc2-out>section[data-k="strategy"] h3{color:#fff!important;font-size:16px!important}
.sc-modal .sc2-out>section[data-k="strategy"] li{font-size:14px!important;line-height:1.65!important;animation:sc-in .45s ease both}
.sc-modal .sc2-out>section[data-k="market"],.sc-modal .sc2-out>section[data-k="status"]{padding:12px 16px 12px!important}
.sc-modal .sc2-out>section[data-k="market"] h3,.sc-modal .sc2-out>section[data-k="status"] h3{font-size:13.5px!important;margin-bottom:6px!important}
/* 분석 중: 줄이 올라가는 작은 창 + 진행 바 */
.sc2-out>section.running{position:relative;overflow:hidden}
.sc2-out>section.running:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:35%;background:linear-gradient(90deg,transparent,#a78bfa,transparent);animation:sc-run 1.1s ease-in-out infinite}
@keyframes sc-run{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
.sc2-out ul.tick{max-height:3.4em;overflow:hidden;display:flex;flex-direction:column;gap:2px}
.sc2-out ul.tick li{opacity:.75}
.sc2-out ul.tick li:last-child{opacity:1}
.sc-modal .sc2-out>section.writing li:last-child:after{content:"";display:inline-block;width:7px;height:14px;margin-left:3px;background:#a78bfa;vertical-align:-2px;animation:sc-caret .8s steps(2) infinite}
@keyframes sc-caret{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.sc2-out>section.running:after{animation:none}.sc-modal .sc2-out>section.writing li:last-child:after{animation:none}}
.sc-modal .sc2-key{margin:0!important}
/* ===== 모바일(900px 이하) 깨짐 보정 ===== */
@media(max-width:900px){
  #impact .section-head h2,#features .section-head h2,#partners .section-head h2,#pricing .section-head h2,#faq .section-head h2{font-size:clamp(24px,7.4vw,32px)!important;white-space:normal!important;word-break:keep-all;overflow-wrap:anywhere}
  #impact .section-head>p:not(.kicker),#features .section-head>p:not(.kicker),#partners .section-head>p:not(.kicker),#pricing .section-head>p:not(.kicker),#faq .section-head>p:not(.kicker){font-size:15px!important}
  /* 활용 방법: 한 열로 쌓기 */
  #features .f7-body{grid-template-columns:1fr!important;height:auto!important;gap:14px!important;width:100%!important}
  .f7-use,.f7-sell{height:auto!important}
  .f7-cards{min-height:0!important}
  .f7-fc{height:auto!important;grid-template-columns:56px 1fr!important;padding:12px 14px!important}
  .f7-fc img{width:56px!important;height:56px!important}
  .f7-sell{padding-bottom:24px!important}
  .f7-ph{width:min(80%,280px)!important;min-height:0!important}
  .f7-ph{border-bottom-width:3px!important;border-radius:34px!important}
  .f7-pills{flex-wrap:wrap}
  .f7-pills button{padding:10px 16px!important;font-size:14px!important}
  .f7-ar{width:34px;height:34px}.f7-pv{left:-2px}.f7-nx{right:-2px}
  /* 마무리 */
  .closing .cl-feed{grid-template-columns:1fr!important;width:100%!important}
  .cl-col[data-feed="blog"] .cl-posts{grid-template-columns:1fr 1fr}
  .cl-card{flex-direction:column!important;align-items:flex-start!important}
  .cl-card .btn{width:100%;justify-content:center}
  .cl-msg h2{font-size:24px!important}
  .closing .cl-feed{margin-bottom:28px!important}
  /* 분석 모달 */
  .sc-modal-inner{padding-left:16px;padding-right:16px}
}
/* ===== 모바일: 서비스 소개 4단계를 좌우로 넘기는 카드로 ===== */
@media(max-width:900px){
  .ef{display:flex!important;align-items:flex-start;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:12px -20px 0!important;padding:4px 20px 16px;max-width:none!important}
  .ef::-webkit-scrollbar{display:none}
  .ef-stage,.ef-stage:nth-child(even){flex:0 0 100%;width:100%;min-height:0!important;scroll-snap-align:center;scroll-snap-stop:always;display:block!important;padding:22px 18px 24px!important;border:1px solid rgba(255,255,255,.14);border-radius:24px;background:linear-gradient(160deg,rgba(124,77,255,.14),rgba(255,255,255,.03) 60%);box-sizing:border-box}
  .ef-stage .ef-text,.ef-stage .ef-screen{opacity:1!important;transform:none!important;transition:none!important}
  .ef-stage .ef-screen{margin-top:20px;height:auto!important}
  .ef-flow{margin-bottom:18px!important}
  .ef-text h3{font-size:30px!important;margin:4px 0 10px!important}
  .ef-lead{font-size:15px!important;margin-bottom:16px!important}
  .ef-methods{min-height:0!important}
}
/* 모바일: 스크롤에 맞춰 카드가 넘어가도록 카드 영역 고정(sticky) + 스크롤 길이 확보 */
.ef-spacer{display:none}
@media(max-width:900px){
  .ef{position:sticky;top:70px;z-index:2;overflow-x:hidden!important;scroll-snap-type:none!important}
  .ef-spacer{display:block;height:210vh;pointer-events:none}
  .ef-stage .ef-screen{max-height:none}
}
/* 모바일: 상품 > 자사몰 연동을 위(사이트)·아래(상품 목록) 배치, HERO 결과의 "쓸 수 있는 기능" 칩 표시 */
@media(max-width:900px){
  .lf-web{grid-template-columns:1fr!important;gap:10px!important}
  .lf-web .lf-arrow{transform:rotate(90deg);justify-self:center;font-size:20px}
  .lf-cards{grid-template-columns:repeat(2,1fr)!important}
  .lf-nav{flex-wrap:wrap;row-gap:4px}
  .lf-menu{display:none}
  .lf-fill{width:100%}
}
@media(max-width:760px){
  .sc2-more .sc2-key,.sc2-more .sc2-key.sk{display:flex!important;flex-wrap:wrap;gap:6px!important;padding:10px 12px!important;min-height:0!important}
  .sc2-more .sc2-key p{flex:0 0 100%;margin:0 0 2px!important;font-size:12px!important}
  .sc2-more .sc2-key span{padding:5px 10px!important;font-size:12px!important}
  .sc2-more .sc2-key.sk>i{height:28px;width:70px}
}
/* 모바일 카드 윗부분 압축(한 화면에 들어오도록) */
@media(max-width:900px){
  .ef-stage,.ef-stage:nth-child(even){padding:14px 14px 16px!important}
  .ef-flow{margin-bottom:10px!important}
  .ef-flow li b{width:26px;height:26px;font-size:11px}
  .ef-flow li.cur b{width:32px!important;height:32px!important;font-size:14px!important}
  .ef-flow li+li:before{width:16px;margin:0 6px}
  .ef-text h3{font-size:24px!important;margin:2px 0 6px!important}
  .ef-lead{font-size:13.5px!important;margin:0 0 10px!important;line-height:1.5!important}
  .ef-methods{flex-direction:row!important;overflow-x:auto;gap:6px!important;padding-bottom:2px;scrollbar-width:none}
  .ef-methods::-webkit-scrollbar{display:none}
  .ef-methods li{flex:0 0 auto}
  .ef-methods button{width:auto!important;white-space:nowrap;padding:9px 13px!important;font-size:13px!important;border-radius:999px!important}
  .ef-methods button i{display:none}
  .ef-stage .ef-screen{margin-top:10px!important}
}
/* 모바일 자사몰 연동: 상품 4개만 표시(사이트 카드 4개, 가져온 목록 4줄), 큰 배너 이미지는 숨김 */
@media(max-width:900px){
  .lf-cards .lf-sc:nth-child(n+5){display:none!important}
  .lf-fill .lf-row2:nth-of-type(n+5){display:none!important}
  .lf-hero{display:none!important}
  .lf-scan{display:none}
}
/* 모바일: 좌우로 밀려 등장하는 요소가 페이지를 가로로 넓혀 화면이 축소돼 보이던 문제 해결 */
@media(max-width:900px){
  #impact .imp-card:nth-child(odd),#impact .imp-card:nth-child(even){transform:translateY(24px)}
  #impact .imp-card.seen{transform:none}
  .dyn.l,.dyn.r{transform:translateY(24px)}
  .dyn.dyn-in{transform:none}
}
/* 모바일 매장 선물하기: 테이블 QR 카드와 3단계 안내를 가로로 나란히 → 장면 높이 축소 */
@media(max-width:900px){
  .gp{gap:8px!important}
  .gp-left{display:grid!important;grid-template-columns:1.1fr 1fr;grid-template-areas:"tq st";gap:8px 10px!important;align-items:center}
  .gp-left>small{display:none}
  .gp-left .tq{grid-area:tq;margin:0!important;transform:none!important}
  .gp-left .gp-steps{grid-area:st;margin:0!important}
  .gp-steps li{padding:6px 8px!important;font-size:11.5px!important}
}
/* 모바일 POS 연동: POS 단말 위, 상품권 카드 아래로 세로 배치 */
@media(max-width:900px){
  .us-pos{grid-template-columns:1fr!important;gap:10px!important;justify-items:center}
  .us-pos .posm{width:min(100%,330px)}
  .us-pos .posm .ps{height:250px!important}
  .us-pos .rd{order:2!important}
  .us-pos .rd-card{width:150px!important}
  .ps-oi span:first-child{font-size:9.5px!important}
}
/* 모바일 정산: 채널·건수·금액이 카드 안에 들어오도록 열 폭 축소 */
@media(max-width:560px){
  .d-set.st{padding:14px 14px 18px!important}
  .st-r{grid-template-columns:86px minmax(0,1fr) 30px 70px!important;gap:8px!important;font-size:11.5px!important}
  .st-r .bk-lg,.st-r .bk-txt{width:86px!important;height:26px!important}
  .st-r .bk-lg{padding:4px 8px!important}
  .st-r b{font-size:11.5px!important;white-space:nowrap}
  .st-r em{font-size:10.5px!important;white-space:nowrap}
  .st-sum,.st-p2 .st-sum{font-size:13px!important}
  .st-p2 .st-tot b{font-size:26px!important}
}
/* 모바일 POS: 단말을 더 높게, 안쪽 간격을 줄여 주문 합계·결제 버튼이 잘리지 않게 */
@media(max-width:900px){
  .us-pos .posm .ps{height:292px!important}
  .us-pos .ps-side .ps-total{padding:8px 10px 0!important}.us-pos .ps-side .ps-total b{font-size:19px!important}
  .us-pos .ps-side .ps-pay{padding:6px 10px!important;gap:5px!important}
  .us-pos .ps-side .ps-pay span{padding:9px 3px!important;font-size:10.5px!important}
  .us-pos .ps-ord{padding:8px 10px!important}
  .us-pos .ps-oi{padding:7px 0!important}
}
/* 사용 단계: 앱 간편 사용과 POS에서 사용 모두 고객 상품권 카드를 앞(데스크톱 왼쪽/모바일 위)에 */
.us-pos .rd{order:-1}
@media(min-width:901px){
  .us-pos{grid-template-columns:.62fr 1.5fr!important;gap:22px!important}
  .us-pos .rd-card{width:190px!important}
}
@media(max-width:900px){.us-pos .rd{order:-1!important}.us-pos .rd-card{width:190px!important}}
/* 왼쪽 페이지 인덱스: 원과 글자 사이 간격 */
.pidx button{gap:16px!important}
/* 모바일 상단바 고정 */
@media(max-width:900px){
  .header{position:fixed!important;top:0;left:0;right:0;z-index:60}
  body{padding-top:62px}
  html{scroll-padding-top:62px}
  .mobile-nav{top:62px}
}
/* ===== 모바일: 메뉴를 오른쪽에서 열리는 드로어로 (도입 문의·서비스 신청 포함) ===== */
.md-head,.md-ov{display:none}
@media(max-width:900px){
  .nav-actions{display:none!important}
  .mobile-nav{position:fixed!important;top:0!important;right:0;bottom:0;left:auto!important;z-index:90;width:min(84vw,320px);height:100dvh;margin:0;padding:0 22px 28px;display:flex!important;flex-direction:column;gap:2px;overflow-y:auto;background:#15102a;border-left:1px solid rgba(255,255,255,.12);box-shadow:-20px 0 60px rgba(0,0,0,.5);transform:translateX(105%);visibility:hidden;transition:transform .38s cubic-bezier(.16,.84,.44,1),visibility 0s .38s}
  .mobile-nav.open{transform:none;visibility:visible;transition:transform .38s cubic-bezier(.16,.84,.44,1),visibility 0s}
  .md-head{display:flex;align-items:center;justify-content:space-between;height:62px;flex:0 0 auto;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.1);color:#9a92ad;font-size:13px;font-weight:800;letter-spacing:.08em}
  .md-x{width:40px;height:40px;margin-right:-8px;border:0;border-radius:50%;background:transparent;color:#fff;font-size:28px;line-height:1;cursor:pointer}
  .mobile-nav>a:not(.md-cta){padding:15px 4px;border-bottom:1px solid rgba(255,255,255,.07);color:#e6e0f2;font-size:17px;font-weight:700}
  .mobile-nav>a[style*="display:none"]{display:none!important}
  .md-cta{margin-top:10px;display:flex;align-items:center;justify-content:center;height:50px;border-radius:999px;background:linear-gradient(135deg,#9d6dff,#7634CB 60%,#5b2bc4);color:#fff!important;font-size:16px;font-weight:800;text-align:center;box-shadow:0 12px 26px rgba(124,77,255,.4)}
  .md-cta.ghost{margin-top:auto;background:transparent;border:1px solid rgba(255,255,255,.32);box-shadow:none}
  .md-cta.ghost + .md-cta{margin-top:10px}
  .md-ov{display:block;position:fixed;inset:0;z-index:80;background:rgba(5,3,12,.6);opacity:0;pointer-events:none;transition:opacity .3s}
  html.drawer-open .md-ov{opacity:1;pointer-events:auto}
  html.drawer-open,html.drawer-open body{overflow:hidden}
  .menu{position:relative;z-index:70}
}
/* 모바일: 같은 고객 모바일 상품권은 어느 장면에서나 같은 크기 */
@media(max-width:900px){
  .us-app .us-v,.us-pos .us-v{width:190px!important;max-width:190px!important;min-height:203px;margin-left:auto;margin-right:auto}
}
/* 데스크톱: 앱·POS 장면에서 고객 상품권이 같은 높이에서 시작 */
@media(min-width:901px){
  .us-pos{align-items:start!important}
  .us-pos .rd{margin-top:30px;justify-content:flex-start!important}
  .us-pos .posm{margin-top:0}
}
/* 사용 단계: 앱·POS 장면의 틀을 같게(같은 폭·같은 높이) 해서 고객 상품권이 정확히 같은 자리에 오게 */
@media(min-width:901px){
  .us-app,.us-pos{width:560px;max-width:100%;min-height:372px;margin:0 auto;justify-content:start!important}
  .us-app{grid-template-columns:190px 1fr!important;gap:40px!important}
  .us-app .us-v0{margin-top:30px!important}
  .us-pos{grid-template-columns:190px 1fr!important}
  .us-pos .rd{margin-top:30px}
}
/* 이런 상품권을 발행할 수 있어요: 점 아래 빈 공간을 줄이고 상품권 카드를 키워 하단 간격을 일정하게 */
#features .f7-sell{display:flex!important;flex-direction:column}
#features .f7-vouchers{flex:1 1 auto!important;min-height:0;align-items:stretch!important}
#features .f7-ph{flex:1 1 auto;display:flex!important;flex-direction:column;min-height:0!important;margin-bottom:-14px}
#features .f7-big{flex:1 1 auto;height:auto!important;min-height:190px}
#features .f7-bv .f7-bh{flex:1 1 auto!important;height:auto!important;min-height:84px}
#features .f7-ph .f7-cd{margin:14px 0 40px!important}
@media(max-width:900px){#features .f7-big{min-height:250px}#features .f7-ph .f7-cd{margin:12px 0 30px!important}}
/* 폰을 아래로 내려 확실히 잘려 보이게(PC·모바일 동일). 점은 폰 안쪽 위치로 고정해 잘리지 않게 */
#features .f7-vouchers{align-items:flex-start!important}
#features .f7-ph{flex:none!important;display:block!important;min-height:480px!important;margin-bottom:0!important;padding-bottom:0!important}
#features .f7-big{flex:none!important;height:252px!important;min-height:0!important}
#features .f7-ph .f7-cd{position:absolute!important;left:50%;top:372px;transform:translateX(-50%);margin:0!important;z-index:6}
@media(max-width:900px){#features .f7-ph{min-height:470px!important}#features .f7-big{min-height:0!important;height:252px!important}#features .f7-ph .f7-cd{top:352px;margin:0!important}}
@media(max-width:900px){#features .f7-sell{height:470px!important;padding-bottom:0!important;overflow:hidden}}