/* Pricing.dc.html 에서 만듦 — 손으로 고치지 않는다(node portal/build.js) */
body{margin:0;background:#ffffff;font-family:'Pretendard Variable','Pretendard',sans-serif}
/* 페이지 기본 · 등장 모션(.rv .ln .pop .fl .pg) · 배지 · 벤토는 site.css */
/* 1. hero */
.phero{padding:var(--hero-top) 0 112px}
.phero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center}
.phero h1{font-size:clamp(36px,5.6vw,72px);line-height:1.22;font-weight:800;letter-spacing:-0.035em;margin-top:0;color:var(--ink)}
.phero h1 .fo{letter-spacing:-0.02em}
.phero h1 em{font-style:normal;color:var(--pri-d)}
.phero .sub{font-size:20px;line-height:1.6;letter-spacing:-0.015em;color:var(--mut);margin-top:var(--hero-gap-sub);max-width:30em;text-wrap:pretty;word-break:keep-all}
/* 영문 뱃지를 뺀 자리: 제목이 섹션의 시작(리뉴얼 점검 1차) */
.sec .wrap > .h2:first-child,.faqG > div > .h2:first-child,.esBox h2:first-child,.ctaBox > h2,.bc > h3:first-child{margin-top:0}
.lede,.ans,.plan .d,.extra .d,.bc .d{word-break:keep-all}
.phero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--hero-gap-act)}
.phero .vat{font-size:14px;line-height:1.5;color:var(--mut);margin-top:20px}
.orb{display:grid;place-items:center}
.orb-in{position:relative;width:100%;max-width:440px;padding:56px 36px}
/* 히어로 오른쪽(리뉴얼 점검 1차): 궤도 장식 대신 월 요금 예시 카드. 줄이 차례로 올라오고 합계가 마지막에 */
.bill{position:relative;z-index:1;padding:32px;border-radius:28px;background:#ffffff;box-shadow:0 0 0 1px #ececf0,0 18px 40px rgba(29,29,31,.10)}
.bill-t{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;font-weight:800;color:var(--ink)}
.bill-t span{font-size:13px;font-weight:600;color:var(--mut)}
.bill dl{margin:18px 0 0}
.bill dl>div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line-2);font-size:15px;line-height:1.4}
.bill dt{color:var(--ink-2)}
.bill dd{margin:0;font-weight:700;color:var(--ink)}
.bill dd .fo{font-weight:700}
.bill-sum{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;padding-top:16px;border-top:1.5px solid var(--ink)}
.bill-sum span{font-size:15px;font-weight:800;color:var(--ink)}
.bill-sum b{font-size:18px;font-weight:800;color:var(--pri-d)}
.bill-sum b .fo{font-size:32px;letter-spacing:.01em;margin-right:2px}
.bill-n{margin-top:12px;font-size:13px;line-height:1.5;color:var(--mut);word-break:keep-all}
.js .bill dl>div,.js .bill-sum{opacity:0;transform:translateY(12px)}
.sec.is-in .bill dl>div{opacity:1;transform:none;transition:opacity .6s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s)}
.sec.is-in .bill-sum{opacity:1;transform:none;transition:opacity .6s var(--ease) 1s,transform .6s var(--ease) 1s}
@media (prefers-reduced-motion:reduce){.js .bill dl>div,.js .bill-sum{opacity:1;transform:none}}
/* 궤도 그림만 칸에 꽉 채운다(떠 있는 카드 안 아이콘은 제 크기 26px) */
.orb-in > svg{width:100%;height:auto;display:block}
.fcard .ic svg{display:block}
.r1{transform-origin:190px 190px;animation:spin 18s linear infinite}
.r2{transform-origin:190px 190px;animation:spin 26s linear infinite reverse}
.r3{transform-origin:190px 190px;animation:spin 36s linear infinite}
.orb-ic{position:absolute;inset:0;margin:auto;width:22%;height:22%;border-radius:24%;overflow:hidden;box-shadow:0 16px 36px rgba(122,53,208,.28);animation:bob 5s ease-in-out infinite}
.orb-ic img{display:block;width:100%;height:100%}
.fchip{position:absolute;z-index:2}
.fchip.c1{left:-8%;top:0}
.fchip.c2{right:-6%;bottom:0}
.fcard{display:flex;align-items:center;gap:16px;padding:14px 22px 14px 14px;background:#ffffff;border-radius:20px;box-shadow:0 0 0 1px var(--line),0 18px 40px rgba(29,29,31,.10)}
.fcard .ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;flex:none}
.fcard .ic.p{background:var(--tint);color:var(--pri-d)}
.fcard .ic.s{background:#e0f4ff;color:#0a6fa3}
.fcard small{display:block;font-size:12px;line-height:1.3;font-weight:600;color:var(--mut)}
.fcard b{display:block;font-family:'Outfit','Pretendard Variable','Pretendard',sans-serif;font-size:24px;line-height:1.2;font-weight:700;letter-spacing:.01em;color:var(--ink)}

/* 2. plan */
.plan{background:var(--soft);border-radius:36px;padding:48px}
.plan-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.tier{display:block;font-family:'Outfit','Pretendard Variable','Pretendard',sans-serif;font-size:14px;line-height:1;font-weight:700;letter-spacing:.12em;color:var(--pri-d)}
.plan h3{font-size:30px;line-height:1.3;font-weight:800;letter-spacing:-0.025em;margin-top:14px}
.plan .d{font-size:17px;line-height:1.55;color:var(--mut);margin-top:8px}
.price{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.price b{font-family:'Outfit','Pretendard Variable','Pretendard',sans-serif;font-size:72px;line-height:1;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.price span{font-size:18px;font-weight:700;color:var(--ink)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:40px}
.tile{background:#ffffff;border-radius:24px;padding:24px 28px;display:flex;align-items:center;gap:18px}
.tile .ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;flex:none}
.tile .ic.p{background:var(--tint);color:var(--pri-d)}
.tile .ic.s{background:#e0f4ff;color:#0a6fa3}
.tile small{display:block;font-size:14px;line-height:1.3;font-weight:600;color:var(--mut)}
.tile b{display:block;font-family:'Outfit','Pretendard Variable','Pretendard',sans-serif;font-size:36px;line-height:1.2;font-weight:700;letter-spacing:.01em;color:var(--ink);margin-top:2px}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;margin-top:36px}
.checks li{display:flex;align-items:center;gap:10px;font-size:16px;line-height:1.5;font-weight:600;color:var(--ink)}
/* 체크: 바탕 없이 보라 체크만(14px) */
.checks li i{display:grid;place-items:center;flex:none;color:var(--pri)}
.checks li i svg{display:block}
.plan .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:44px}
.extra{background:var(--soft);border-radius:36px;padding:48px 40px 40px;display:flex;flex-direction:column}
.extra h3{font-size:24px;line-height:1.35;font-weight:800;letter-spacing:-0.025em}
.extra .d{font-size:15px;line-height:1.55;color:var(--mut);margin-top:6px}
.xrows{margin-top:28px;border-top:1px solid var(--line)}
.xrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 0;border-bottom:1px solid var(--line)}
.xrow dt{font-size:16px;line-height:1.4;color:#3a3a3f}
.xrow dd{font-size:16px;line-height:1.4;font-weight:800;color:var(--ink);white-space:nowrap}
.xrow dd .fo{font-weight:700}
.xex{margin-top:28px;background:#ffffff;border-radius:20px;padding:20px 22px}
.xex small{display:block;font-size:12px;line-height:1.3;font-weight:700;letter-spacing:.02em;color:var(--pri-d)}
.xex p{font-size:15px;line-height:1.6;color:#3a3a3f;margin-top:8px}
.xex p b{color:var(--ink)}
.extra .note{margin-top:auto;padding-top:28px;font-size:13px;line-height:1.5;color:var(--mut)}
.extra .jump{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font-size:15px;font-weight:700;color:var(--pri-d)}
.extra .jump:hover{text-decoration:underline;text-underline-offset:3px}

/* 3. calculator */
.calcS{background:var(--soft)}
.calc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;margin-top:56px;align-items:stretch}
.cin{background:#ffffff;border-radius:36px;padding:48px;display:flex;flex-direction:column;gap:48px}
.sl-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sl-h label{font-size:18px;line-height:1.4;font-weight:800;letter-spacing:-0.02em;color:var(--ink)}
.sl-h b{font-family:'Outfit','Pretendard Variable','Pretendard',sans-serif;font-size:32px;line-height:1;font-weight:700;color:var(--ink)}
.sl-h b small{font-size:18px;font-weight:600;margin-left:2px}
.sl-s{font-size:14px;line-height:1.5;color:var(--mut);margin-top:6px}
.sl-s b{color:var(--ink)}
.rng{position:relative;z-index:1;margin-top:22px}
.rng input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:12px;margin:0;border-radius:99px;outline:none;cursor:pointer;background:var(--track)}
.rng input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:99px;background:#ffffff;box-shadow:0 0 0 3px var(--pri),0 6px 14px rgba(29,29,31,.18);transition:transform .2s var(--pop)}
.rng input::-moz-range-thumb{width:30px;height:30px;border:0;border-radius:99px;background:#ffffff;box-shadow:0 0 0 3px var(--pri),0 6px 14px rgba(29,29,31,.18)}
.rng input:active::-webkit-slider-thumb{transform:scale(1.12)}
.rng input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--pri),0 0 0 9px rgba(144,74,232,.2)}
.rng input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--pri),0 0 0 9px rgba(144,74,232,.2)}
.scale{position:relative;z-index:0;height:20px;margin-top:14px;font-family:'Outfit','Pretendard Variable','Pretendard',sans-serif;font-size:13px;line-height:20px;font-weight:600;color:#6e6e74}
.scale span{position:absolute;top:0}
.scale .a{left:0}
.scale .b{left:25%;transform:translateX(-50%);color:var(--pri-d)}
.scale .b:before{content:"";position:absolute;left:50%;top:-12px;width:2px;height:8px;border-radius:2px;background:var(--pri);transform:translateX(-50%)}
.scale .c{right:0}
.scale.at .b{color:var(--ink);font-weight:800}
.legend{display:flex;flex-wrap:wrap;gap:20px;font-size:14px;line-height:1.4;color:#3a3a3f;margin-top:auto}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:12px;height:12px;border-radius:99px;display:block}
.cout{background:var(--ink);color:#ffffff;border-radius:36px;padding:48px 40px 40px;display:flex;flex-direction:column}
.cout .k{font-size:15px;line-height:1.4;font-weight:600;color:#d2d2d7}
.tot{display:flex;align-items:baseline;gap:6px;margin-top:12px}
.tot b{font-family:'Outfit','Pretendard Variable','Pretendard',sans-serif;font-size:64px;line-height:1;font-weight:700;letter-spacing:-0.02em;color:#ffffff}
.tot > span{font-size:20px;font-weight:700}
.cout .vat{font-size:14px;line-height:1.4;color:#d2d2d7;margin-top:10px}
.brk{margin-top:32px;border-top:1px solid #3a3a3f}
.brk div{display:flex;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid #3a3a3f;font-size:15px;line-height:1.45}
.brk dt{color:#d2d2d7}
.brk dt small{display:block;font-size:13px;color:#a1a1a8;margin-top:2px}
.brk dd{font-weight:700;color:#ffffff;white-space:nowrap}
.brk dd.up{color:var(--sky)}
.cout .btn{margin-top:32px;align-self:flex-start}
.cout .fine{font-size:12.5px;line-height:1.5;color:#a1a1a8;margin-top:16px}

/* 4. included */
/* 카드 틀(.bc)은 site.css — 메인 A DAY 카드와 같은 규칙. 여기는 카드 아래 화면 예시 자리만 */
.bc .art{margin-top:auto;padding-top:36px}
/* INCLUDED: 카드 높이는 내용에 맞춘다(메인 A DAY 카드는 640 유지) */
#included .bc{min-height:0}
/* INCLUDED 화면 예시 모션 — 섹션이 보이면. 기본 모습 = 끝난 상태(모션을 끄면 그대로) */
.addr em{font-style:normal;display:inline-block}
#included.is-in .addr em{animation:inctype 6s steps(18) infinite}
#included.is-in .wcs div{animation:incup .7s var(--ease) both}
#included.is-in .wcs div:nth-child(1){animation-delay:.5s}
#included.is-in .wcs div:nth-child(2){animation-delay:.65s}
#included.is-in .wcs div:nth-child(3){animation-delay:.8s}
#included.is-in .gr{animation:incside .7s var(--ease) both}
#included.is-in .gr:nth-child(1){animation-delay:.5s}
#included.is-in .gr:nth-child(2){animation-delay:.65s}
#included.is-in .gr:nth-child(3){animation-delay:.8s}
#included.is-in .cm-h em{animation:incpress 6s ease infinite}
#included.is-in .lec.nw{animation:incnew 6s var(--ease) infinite}
#included.is-in .lec.nw .badge{animation:incpop 6s var(--pop) infinite}
#included.is-in .qa .a{animation:incans 7s var(--ease) infinite}
#included.is-in .qa .badge.ok{animation:incpop2 7s var(--pop) infinite}
#included.is-in .lap .pg i{animation:inclap 6s linear infinite}
#included.is-in .phn .pg i{animation:incphn 6s var(--ease) infinite}
#included.is-in .sync{animation:incsync 6s ease infinite}
@keyframes inctype{
0%,6%{clip-path:inset(0 100% 0 0)}
30%,100%{clip-path:inset(0 0 0 0)}
}
@keyframes incup{
from{opacity:0;transform:translateY(16px)}
to{opacity:1;transform:none}
}
@keyframes incside{
from{opacity:0;transform:translateX(24px)}
to{opacity:1;transform:none}
}
@keyframes incpress{
0%,22%{transform:none}
25%{transform:scale(.9)}
29%,100%{transform:none}
}
@keyframes incnew{
0%,28%{opacity:0;transform:translateY(-6px)}
36%,92%{opacity:1;transform:none}
98%,100%{opacity:0;transform:translateY(-6px)}
}
@keyframes incpop{
0%,34%{transform:scale(0)}
42%,92%{transform:scale(1)}
98%,100%{transform:scale(0)}
}
@keyframes incans{
0%,22%{opacity:0;transform:translateY(8px)}
30%,92%{opacity:1;transform:none}
98%,100%{opacity:0;transform:translateY(8px)}
}
@keyframes incpop2{
0%,28%{transform:scale(0)}
34%,92%{transform:scale(1)}
98%,100%{transform:scale(0)}
}
@keyframes inclap{
0%{clip-path:inset(0 35% 0 0 round 99px)}
40%,100%{clip-path:inset(0 0 0 0 round 99px)}
}
@keyframes incphn{
0%,50%{clip-path:inset(0 100% 0 0 round 99px)}
62%,100%{clip-path:inset(0 0 0 0 round 99px)}
}
@keyframes incsync{
0%,42%{transform:none}
48%{transform:scale(1.18)}
54%,100%{transform:none}
}
.mu{background:#ffffff;border-radius:24px 24px 0 0;padding:22px 24px 28px;font-size:13px;line-height:1.45;color:var(--ink)}
/* 홈페이지 */
.wbar{display:flex;align-items:center;gap:6px;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.wbar i{width:9px;height:9px;border-radius:99px;background:var(--track);display:block}
.addr{display:inline-flex;align-items:center;gap:6px;margin-left:10px;height:28px;padding:0 14px;border-radius:99px;background:var(--soft);font-family:'Outfit','Pretendard Variable','Pretendard',sans-serif;font-size:13px;font-weight:600;color:#3a3a3f}
.addr svg{color:#137333}
.wnav{display:flex;align-items:center;gap:16px;padding:14px 0;font-size:13px;color:#3a3a3f;font-weight:600}
.wnav b{font-size:15px;font-weight:800;color:var(--ink);margin-right:auto}
.wnav em{font-style:normal;height:28px;padding:0 12px;border-radius:99px;background:var(--ink);color:#ffffff;display:inline-flex;align-items:center;font-size:12px}
.wban{border-radius:18px;background:var(--pri);color:#ffffff;padding:20px 22px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.wban small{display:block;font-size:12px;font-weight:600;opacity:.92}
.wban b{display:block;font-size:20px;line-height:1.3;font-weight:800;margin-top:4px}
.wban span{display:block;font-size:12px;margin-top:4px}
.wban em{font-style:normal;flex:none;height:30px;padding:0 14px;border-radius:99px;background:#ffffff;color:var(--pri-d);display:inline-flex;align-items:center;font-size:12px;font-weight:700}
.wcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.wcs div{border-radius:14px;background:var(--soft);padding:12px}
.wcs i{display:block;height:44px;border-radius:10px;margin-bottom:10px}
.wcs b{display:block;font-size:12.5px;line-height:1.35;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wcs span{display:block;font-size:11.5px;color:var(--mut);margin-top:2px}
.t1{background:#cfe9ff}.t2{background:var(--lav)}.t3{background:#ffe7c7}
/* 그룹 */
.tabs{display:flex;gap:6px;padding:4px;border-radius:99px;background:var(--soft);width:max-content;max-width:100%}
.tabs span{height:30px;padding:0 14px;border-radius:99px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#3a3a3f}
.tabs span.on{background:#ffffff;color:var(--ink);box-shadow:0 1px 3px rgba(29,29,31,.08)}
.tabs span em{font-style:normal;font-family:'Outfit','Pretendard Variable','Pretendard',sans-serif;color:var(--pri-d)}
.grp{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.gr{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line-2)}
.gr .sj{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.sj.m{background:var(--tint);color:var(--pri-d)}.sj.k{background:#ffefd9;color:#9a4a00}.sj.e{background:#e0f4ff;color:#0a6fa3}
.gr .tx{flex:1;min-width:0}
.gr .tx b{display:block;font-size:14px;font-weight:700}
.gr .tx span{display:block;font-size:12px;color:var(--mut)}
.avs{display:flex;align-items:center}
.avs i{width:24px;height:24px;border-radius:99px;border:2px solid #ffffff;margin-left:-8px;display:block}
.avs i:first-child{margin-left:0}
.avs em{font-style:normal;font-family:'Outfit','Pretendard Variable','Pretendard',sans-serif;font-size:12px;font-weight:700;color:#3a3a3f;margin-left:6px;white-space:nowrap}
.a1{background:#d9c4fa}.a2{background:#a9dcff}.a3{background:#ffd3a3}.a4{background:#c9ecd3}
/* 진도율 */
.pv-h{display:flex;align-items:center;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line-2)}
.ring{width:72px;height:72px;flex:none;position:relative}
.ring svg{width:72px;height:72px;display:block;transform:rotate(-90deg)}
.ring .arc{stroke-dasharray:100;stroke-dashoffset:44}
.js .ring .arc{stroke-dashoffset:100}
.sec.is-in .ring .arc{stroke-dashoffset:44;transition:stroke-dashoffset 1.4s var(--ease) .4s}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:'Outfit','Pretendard Variable','Pretendard',sans-serif;font-size:17px;font-weight:700}
.pv-h .who b{display:block;font-size:15px;font-weight:800}
.pv-h .who span{display:block;font-size:12.5px;color:var(--mut)}
.pv-r{padding-top:12px;display:flex;flex-direction:column;gap:12px}
.pr .l{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;line-height:1.4}
.pr .l b{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr .l span{color:var(--mut);white-space:nowrap}
.pr .l span.done{color:#137333;font-weight:700}
.pr .pg{margin-top:6px}
/* 강좌 관리 */
.cm-h{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.cm-h b{font-size:15px;font-weight:800}
.cm-h small{font-size:12px;color:var(--mut);margin-right:auto}
.cm-h em{font-style:normal;height:30px;padding:0 14px;border-radius:99px;background:var(--pri);color:#ffffff;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700}
.lec{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line-2)}
.lec:last-child{border-bottom:0}
.lec .hd2{color:#b4b4ba;flex:none}
.lec .n{font-family:'Outfit','Pretendard Variable','Pretendard',sans-serif;font-weight:700;color:var(--pri-d);width:30px;flex:none}
.lec b{flex:1;min-width:0;font-weight:600;font-size:13.5px}
.lec .tm{font-family:'Outfit','Pretendard Variable','Pretendard',sans-serif;color:var(--mut);font-size:12.5px;width:46px;text-align:right;flex:none;order:2}
.lec .st{order:1}
.lec .st{display:flex;justify-content:flex-end;flex:none}
/* 과제·커뮤니티 */
.hw{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--soft)}
.hw .ic{width:38px;height:38px;border-radius:12px;background:#ffffff;color:var(--pri-d);display:grid;place-items:center;flex:none}
.hw .tx{flex:1;min-width:0}
.hw .tx b{display:block;font-size:14px;font-weight:700}
.hw .tx span{display:block;font-size:12px;color:var(--mut)}
.hw + .hw{margin-top:8px}
.qa{margin-top:14px;padding:14px 16px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line-2)}
.qa .q{font-size:14px;font-weight:700;margin-top:8px}
.qa .q em{font-style:normal;color:var(--pri-d);margin-right:4px}
.qa .a{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--tint);font-size:12.5px;line-height:1.55;color:#3a3a3f}
.qa .a b{display:block;color:var(--pri-d);font-size:12px;margin-bottom:2px}
/* 기기 */
.dev{display:flex;align-items:flex-end;justify-content:center;gap:20px;padding:8px 0 0}
.lap{flex:1;max-width:340px}
.lap .scr{background:#ffffff;border-radius:16px 16px 0 0;box-shadow:inset 0 0 0 6px var(--ink);padding:14px}
.lap .base{height:12px;border-radius:0 0 12px 12px;background:#2c2c30;margin:0 -16px}
.vid{border-radius:10px;background:var(--ink);height:96px;display:grid;place-items:center;color:#ffffff}
.vid i{width:36px;height:36px;border-radius:99px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.vk{font-size:11.5px;color:var(--mut);margin-top:10px}
.vt{font-size:13.5px;font-weight:800;margin-top:2px}
.vp{display:flex;align-items:center;gap:8px;margin-top:8px;font-family:'Outfit','Pretendard Variable','Pretendard',sans-serif;font-size:11.5px;color:var(--mut)}
.vp .pg{flex:1;height:5px}
.phn{width:128px;flex:none;background:#ffffff;border-radius:22px 22px 0 0;box-shadow:inset 0 0 0 5px var(--ink);padding:16px 12px 12px}
.phn .vid{height:62px}
.phn .vid i{width:26px;height:26px}
.sync{align-self:center;width:44px;height:44px;border-radius:99px;background:var(--sky);color:var(--ink);display:grid;place-items:center;flex:none;margin-bottom:40px}
.sync svg{animation:spin 6s linear infinite}

/* 5. e-seodang */
.esBox{background:var(--ink);color:#ffffff;border-radius:44px;padding:64px;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px;align-items:stretch}
.esBox > div:first-child{align-self:center}
.esBox h2{font-size:clamp(30px,3.8vw,44px);line-height:1.3;font-weight:800;letter-spacing:-0.03em;margin-top:24px;color:#ffffff}
.esBox .lede{color:#d2d2d7}
.esBox .pr2{display:flex;align-items:center;gap:12px;margin-top:32px;font-size:15px;color:#d2d2d7}
.esBox .pr2 b{height:34px;padding:0 16px;border-radius:99px;background:transparent;color:#ffffff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45);display:inline-flex;align-items:center;flex:none;white-space:nowrap;font-size:15px;font-weight:700}
.es-acts{display:flex;flex-wrap:nowrap;gap:12px;margin-top:52px}
/* 장비 그림(527×302) — 칸 높이는 왼쪽 글과 같게 늘리고 그림은 가운데 */
.es-img{background:#ffffff;border-radius:32px;padding:32px;display:grid;place-items:center}
.es-img img{width:100%;max-width:527px;height:auto;display:block}

/* 6. faq */
.faqG{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 4px;cursor:pointer;font-size:19px;line-height:1.45;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--pri-d)}
.faq summary:focus-visible{outline:2px solid var(--pri);outline-offset:4px;border-radius:8px}
.faq summary i{width:32px;height:32px;border-radius:99px;background:var(--soft);display:grid;place-items:center;flex:none;color:var(--ink);transition:transform .3s var(--ease),background-color .2s ease}
.faq details[open] summary i{transform:rotate(45deg);background:var(--tint);color:var(--pri-d)}
.faq .ans{padding:0 56px 28px 4px;font-size:16px;line-height:1.7;color:#3a3a3f}
.faq .ans b{color:var(--ink)}

/* 7. cta */
.ctaS{padding:0 0 128px}
.ctaBox{background:var(--soft);border-radius:44px;padding:88px 40px;text-align:center;display:flex;flex-direction:column;align-items:center}
.ctaBox h2{font-size:clamp(30px,3.8vw,48px);line-height:1.3;font-weight:800;letter-spacing:-0.03em;margin-top:24px}
.ctaBox .lede{margin-left:auto;margin-right:auto}
.ctaBox .acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:44px}
.ctaBox .tel{position:relative;z-index:1;margin-top:20px;font-size:15px;color:var(--mut)}
.ctaBox .tel a{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* START 배경: 신청서를 채우는 모션(꾸밈). 기본 모습 = 다 채운 상태, 섹션이 보이면 7초마다 빈 칸부터 다시 채운다 */
.ctaBox{position:relative;overflow:hidden;isolation:isolate}
.ctaBox > .eyebrow,.ctaBox > h2,.ctaBox > .lede,.ctaBox > .acts{position:relative;z-index:1}
.fdeco{position:absolute;inset:0;z-index:0;pointer-events:none}
.fm,.fr{position:absolute;top:50%;padding:18px;border-radius:20px;background:#ffffff;box-shadow:0 0 0 1px var(--line),0 18px 40px rgba(29,29,31,.08);text-align:left}
.fm{left:56px;width:208px;margin-top:-178px;transform:rotate(-6deg) scale(.9)}
.fm-h{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.fm-h i{display:block;width:56px;height:8px;border-radius:99px;background:var(--pri)}
.fm-h i + i{width:36px;background:var(--track)}
.fm-f{margin-top:10px}
.fm-f b{display:block;width:44px;height:6px;border-radius:99px;background:var(--track)}
.fm-f span{display:flex;align-items:center;height:30px;margin-top:6px;padding:0 10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line)}
.fm-f em{display:block;width:var(--w);height:7px;border-radius:99px;background:var(--ink-2)}
.fm-c{display:flex;align-items:center;gap:8px;margin-top:14px}
.fm-c span{width:16px;height:16px;border-radius:5px;background:var(--pri);color:#ffffff;display:grid;place-items:center;flex:none}
.fm-c span svg{display:block}
.fm-c span path{stroke-dasharray:20;stroke-dashoffset:0}
.fm-c b{display:block;width:96px;height:6px;border-radius:99px;background:var(--track)}
.fm-s{display:flex;align-items:center;justify-content:center;height:32px;margin-top:16px;border-radius:99px;background:var(--pri)}
.fm-s i{display:block;width:48px;height:6px;border-radius:99px;background:rgba(255,255,255,.85)}
.fm-cur{position:absolute;left:118px;top:246px;color:var(--ink)}
.fm-cur svg{display:block}
.fr{right:64px;width:176px;margin-top:-108px;transform:rotate(5deg)}
.fr-h{display:flex;align-items:center;gap:10px}
.fr-h i{width:28px;height:28px;border-radius:99px;background:var(--lav);flex:none}
.fr-h b{display:block;width:72px;height:7px;border-radius:99px;background:var(--track)}
.fr-ok{width:64px;height:64px;margin:20px auto 16px;border-radius:99px;background:var(--pri);color:#ffffff;display:grid;place-items:center}
.fr-l{display:block;width:120px;height:6px;margin:8px auto 0;border-radius:99px;background:var(--track)}
.fr-l + .fr-l{width:84px}
.ctaS.is-in .fm-f em{animation:fmt1 7s var(--ease) infinite}
.ctaS.is-in .fm-f.f2 em{animation-name:fmt2}
.ctaS.is-in .fm-f.f3 em{animation-name:fmt3}
.ctaS.is-in .fm-c span{animation:fmbox 7s ease infinite}
.ctaS.is-in .fm-c span path{animation:fmchk 7s ease infinite}
.ctaS.is-in .fm-s{animation:fmsub 7s ease infinite}
.ctaS.is-in .fm-cur{animation:fmcur 7s var(--ease) infinite}
.ctaS.is-in .fr-ok{animation:frok 7s var(--pop) infinite}
@keyframes fmt1{
0%,5%{clip-path:inset(0 100% 0 0 round 99px);opacity:1}
16%,90%{clip-path:inset(0 0 0 0 round 99px);opacity:1}
97%,100%{clip-path:inset(0 0 0 0 round 99px);opacity:0}
}
@keyframes fmt2{
0%,19%{clip-path:inset(0 100% 0 0 round 99px);opacity:1}
30%,90%{clip-path:inset(0 0 0 0 round 99px);opacity:1}
97%,100%{clip-path:inset(0 0 0 0 round 99px);opacity:0}
}
@keyframes fmt3{
0%,33%{clip-path:inset(0 100% 0 0 round 99px);opacity:1}
44%,90%{clip-path:inset(0 0 0 0 round 99px);opacity:1}
97%,100%{clip-path:inset(0 0 0 0 round 99px);opacity:0}
}
@keyframes fmbox{
0%,49%{background:#ffffff;box-shadow:inset 0 0 0 1.5px var(--line-input)}
52%,90%{background:var(--pri);box-shadow:none}
97%,100%{background:#ffffff;box-shadow:inset 0 0 0 1.5px var(--line-input)}
}
@keyframes fmchk{
0%,51%{stroke-dashoffset:20}
57%,90%{stroke-dashoffset:0}
97%,100%{stroke-dashoffset:20}
}
@keyframes fmsub{
0%,61%{background:var(--track)}
64%,90%{background:var(--pri)}
97%,100%{background:var(--track)}
}
@keyframes fmcur{
0%,4%{transform:translate(12px,-176px)}
16%{transform:translate(12px,-176px)}
20%{transform:translate(-8px,-124px)}
30%{transform:translate(-8px,-124px)}
34%{transform:translate(22px,-72px)}
44%{transform:translate(22px,-72px)}
49%{transform:translate(-92px,-34px)}
53%{transform:translate(-92px,-34px)}
60%{transform:translate(0,0) scale(1)}
62%{transform:translate(0,0) scale(.82)}
66%,90%{transform:translate(0,0) scale(1)}
100%{transform:translate(12px,-176px)}
}
@keyframes frok{
0%,64%{transform:scale(0);opacity:0}
70%{transform:scale(1.12);opacity:1}
74%,90%{transform:scale(1);opacity:1}
97%,100%{transform:scale(0);opacity:0}
}

/* responsive */
@media (max-width:1080px){
.phero .wrap,.calc,.esBox,.faqG{grid-template-columns:minmax(0,1fr)}
.orb-in{max-width:380px;margin:24px auto 0}
.esBox{padding:48px 32px}
.fdeco{display:none}
}
@media (max-width:640px){
.es-acts{flex-wrap:wrap;margin-top:40px}
.phero{padding:var(--hero-top) 0 72px}
.fchip.c1{left:0;top:2%}
.fchip.c2{right:0;bottom:4%}
.fcard b{font-size:20px}
.plan,.cin{padding:28px 22px}
.extra,.cout{padding:32px 22px}
.price b{font-size:56px}
.tiles,.checks{grid-template-columns:minmax(0,1fr)}
.tot b{font-size:52px}
.mu{padding:18px 16px 22px}
.lec .st{width:auto}
.lec .tm{display:none}
.wcs{grid-template-columns:repeat(2,minmax(0,1fr))}
.wcs div:nth-child(3){display:none}
.sync{display:none}
.phn{display:none}
.faq .ans{padding-right:4px}
.ctaBox{padding:56px 20px}
.ctaBox .acts .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
.js .ring .arc{stroke-dashoffset:44}
}