/* =========================================================
   싹싹청소 파트너 모집 — White + Toss Blue
   ========================================================= */
:root{
  --blue:#3182F6; --blue-d:#1B64DA; --blue-dd:#0E4DB8; --blue-l:#E8F3FF; --blue-ll:#F4F9FF;
  --ink:#191F28; --ink2:#333D4B; --gray:#6B7684; --gray2:#8B95A1; --gray3:#B0B8C1;
  --line:#E5E8EB; --bg2:#F2F4F6; --bg3:#F9FAFB; --red:#F04452; --yellow:#FFC93C;
  --r:24px; --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --hd:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + 12px);-webkit-text-size-adjust:100%}
body{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color:var(--ink);background:#fff;line-height:1.5;letter-spacing:-.02em;word-break:keep-all;overflow-x:hidden;-webkit-font-smoothing:antialiased}
main,.ft{overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;border:0;background:none}
ul,ol{list-style:none}
svg{width:1em;height:1em;fill:currentColor;flex-shrink:0}
em{font-style:normal}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.pc{display:none}
@media(min-width:768px){.pc{display:inline}}

/* ---------------------------------------------------- 공통 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 24px;border-radius:16px;
  font-weight:700;font-size:16px;transition:transform .25s var(--spring),background .2s,box-shadow .25s;position:relative;overflow:hidden;white-space:nowrap}
.btn svg{font-size:18px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:scale(.96)}
.btn-lg{height:60px;padding:0 28px;font-size:17px;border-radius:18px}
.btn-block{width:100%}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 28px -8px rgba(49,130,246,.55)}
.btn-primary:hover{background:var(--blue-d);box-shadow:0 14px 34px -8px rgba(49,130,246,.65);transform:translateY(-2px)}
.btn-soft{background:var(--blue-l);color:var(--blue-d)}
.btn-soft:hover{background:#d6e9ff;transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--blue-d);box-shadow:0 12px 30px -10px rgba(0,0,0,.35)}
.btn-white:hover{transform:translateY(-2px)}
.shine::after{content:"";position:absolute;top:0;left:0;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-150%) skewX(-20deg);animation:shine 3.2s ease-in-out infinite}
@keyframes shine{0%,60%{transform:translateX(-150%) skewX(-20deg)}100%{transform:translateX(325%) skewX(-20deg)}}

/* ---------------------------------------------------- 진행바 · 티커 · 헤더 */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;background:linear-gradient(90deg,#5AA9FF,var(--blue),var(--blue-dd));transform-origin:0 50%;transform:scaleX(0)}
.ticker{background:var(--blue);color:#fff;overflow:hidden;height:36px;display:flex;align-items:center;font-size:13.5px;font-weight:600}
.ticker-in{display:flex;gap:36px;white-space:nowrap;animation:marquee 32s linear infinite;padding-left:36px}
.ticker b{color:#fff;background:rgba(255,255,255,.18);padding:1px 7px;border-radius:6px;margin-left:2px}
@keyframes marquee{to{transform:translateX(-50%)}}

.hd{position:sticky;top:0;z-index:100;height:var(--hd);background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.hd.scrolled{border-color:var(--line);box-shadow:0 6px 24px -18px rgba(0,0,0,.3)}
.hd-in{height:100%;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:9px}
.brand-mark{width:36px;height:36px;filter:drop-shadow(0 6px 10px rgba(49,130,246,.35))}
.brand-mark .logo-spark,.brand .logo-spark{transform-origin:35.5px 11.9px;animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.55) rotate(45deg)}}
.brand-txt{font-size:21px;font-weight:850;letter-spacing:-.06em;display:flex;align-items:flex-start;gap:4px;line-height:1}
.brand-txt em{font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--blue);margin-top:1px}
.hd-nav{display:none;margin-left:auto;gap:4px}
.hd-nav a{padding:8px 12px;border-radius:10px;font-size:15px;font-weight:600;color:var(--ink2);transition:background .2s,color .2s}
.hd-nav a:hover{background:var(--bg2)}
.hd-nav a.on{color:var(--blue);background:var(--blue-l)}
.hd-tel{display:none;align-items:center;gap:6px;font-weight:700;color:var(--ink2);font-size:15px}
.hd-tel svg{color:var(--blue)}
.hd-cta{position:relative;margin-left:auto;height:40px;padding:0 16px;border-radius:12px;background:var(--blue);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center}
.hd-cta::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid rgba(49,130,246,.55);pointer-events:none;animation:pulse-b 2.4s ease-out infinite}
@keyframes pulse-b{0%{transform:scale(1);opacity:1}70%,100%{transform:scale(1.25,1.5);opacity:0}}
@media(min-width:1024px){
  .hd-nav{display:flex}
  .hd-tel{display:flex}
  .hd-cta{margin-left:8px;height:44px;padding:0 20px;font-size:15px}
}

/* ---------------------------------------------------- HERO */
.hero{position:relative;overflow:hidden;padding:36px 0 44px;background:linear-gradient(180deg,#fff 0%,var(--blue-ll) 100%)}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:drift 14s ease-in-out infinite alternate}
.hero .b1{width:520px;height:520px;background:#bfe0ff;top:-180px;right:-140px}
.hero .b2{width:380px;height:380px;background:#d9ecff;bottom:-120px;left:-120px;animation-delay:-5s}
.hero .b3{width:260px;height:260px;background:#a8d1ff;top:40%;left:45%;opacity:.35;animation-delay:-9s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.12)}100%{transform:translate(-30px,20px) scale(.95)}}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(49,130,246,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(49,130,246,.06) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 70%)}
.hero-in{position:relative;display:grid;gap:36px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;background:#fff;border:1px solid #d6e7ff;font-size:14px;font-weight:600;color:var(--ink2);
  box-shadow:0 6px 18px -10px rgba(49,130,246,.5)}
.chip b{color:var(--blue)}
.live{width:8px;height:8px;border-radius:50%;background:var(--blue);position:relative}
.live::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--blue);animation:ping 1.4s infinite}
@keyframes ping{to{transform:scale(3);opacity:0}}
.hero-q{margin-top:22px;font-size:clamp(18px,2.2vw,24px);font-weight:700;color:var(--gray)}
.hero-h{margin-top:8px;font-size:clamp(42px,6.6vw,80px);line-height:1.12;font-weight:850;letter-spacing:-.055em}
.hero-h .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero-h .ln>span{display:inline-block;transform:translateY(110%);animation:lineUp .9s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes lineUp{to{transform:none}}
.wipe{position:relative;display:inline-block;color:var(--blue);z-index:0}
.wipe::before{content:"";position:absolute;left:-.08em;right:-.08em;bottom:.08em;height:.32em;background:var(--blue-l);z-index:-1;border-radius:.1em;
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--ease) .35s}
.wipe::after{content:"";position:absolute;top:-.05em;bottom:-.05em;left:0;right:0;pointer-events:none;
  background:linear-gradient(180deg,#9cc8ff,var(--blue)) left top/.12em 100% no-repeat;opacity:0}
.wipe.go::before{transform:scaleX(1)}
.wipe.go::after{animation:squeegee 1s var(--ease) .35s}
.hero .wipe::before{animation:wipeIn 1s var(--ease) 1s both}
.hero .wipe::after{animation:squeegee 1s var(--ease) 1s}
@keyframes wipeIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes squeegee{0%{transform:translateX(0);opacity:1}90%{opacity:1}100%{transform:translateX(100%);opacity:0}}
.hero-type{margin-top:20px;font-size:clamp(17px,2vw,21px);font-weight:600;color:var(--ink2);display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.type{color:#fff;background:var(--blue);padding:3px 12px;border-radius:10px;min-width:1ch}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--blue);margin-left:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero-cta .btn{flex:1 1 auto}
/* 히어로 스탯 보드 */
.hstat{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:36px}
.hs{position:relative;overflow:hidden;border-radius:26px;padding:18px 16px 18px;background:#fff;border:1px solid #DCE9FB;
  box-shadow:0 30px 60px -42px rgba(27,100,218,.55);opacity:0;transform:translateY(50px) scale(.94);
  transition:opacity .7s var(--ease),transform .9s var(--spring),box-shadow .35s;transition-delay:var(--d,0s)}
.hstat.go .hs{opacity:1;transform:none}
.hstat.go .hs:hover{transform:translateY(-6px);transition-delay:0s;box-shadow:0 40px 70px -40px rgba(27,100,218,.7)}
.hs-zero{background:linear-gradient(150deg,#4C9AFF 0%,var(--blue) 42%,var(--blue-dd) 100%);color:#fff;border:0}
.hs-zero::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.1);right:-80px;top:-90px}
.hs-zero::after{content:"";position:absolute;top:0;left:0;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-140%) skewX(-20deg);animation:shineZ 4.2s ease-in-out infinite}
@keyframes shineZ{0%,60%{transform:translateX(-140%) skewX(-20deg)}100%{transform:translateX(260%) skewX(-20deg)}}
.hs-lb{position:relative;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800}
.hs-lb i{font-style:normal;font-size:10.5px;font-weight:900;padding:3px 7px;border-radius:99px;background:var(--blue-l);color:var(--blue);letter-spacing:.04em}
.hs-zero .hs-lb i{background:rgba(255,255,255,.2);color:#fff}
.hs-old,.hs-tag{position:relative;display:inline-block;margin-top:10px;font-size:13px;font-weight:700;line-height:1.4}
.hs-old{text-decoration:none;color:rgba(255,255,255,.78)}
.hs-old::after{content:"";position:absolute;left:-3px;right:-3px;top:52%;height:2.5px;border-radius:2px;background:#FF6B78;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--ease) .2s}
.hs.run .hs-old::after,.hs.hit .hs-old::after{transform:scaleX(1)}
.hs-tag{color:var(--blue-d);background:var(--blue-l);padding:2px 9px;border-radius:99px}
.hs-num{position:relative;display:flex;align-items:baseline;margin-top:4px;font-size:clamp(46px,12.5vw,72px);font-weight:900;letter-spacing:-.06em;line-height:1.02;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.hs-num small{font-size:.36em;font-weight:800;margin-left:4px;letter-spacing:-.03em}
.hs-week .hs-num,.hs-year .hs-num{background:linear-gradient(180deg,#5AA9FF,var(--blue-dd));-webkit-background-clip:text;background-clip:text;color:transparent}
.hs-zero .hs-num{text-shadow:0 10px 30px rgba(0,0,0,.18)}
.hs.hit .hs-num{animation:hsPop .6s var(--spring)}
@keyframes hsPop{0%{transform:scale(1.35)}100%{transform:none}}
.hs-ft{position:relative;margin-top:6px;font-size:12.5px;font-weight:600;opacity:.88}
.hs-stamp{position:absolute;right:14px;top:14px;font-style:normal;font-size:15px;font-weight:900;letter-spacing:.1em;border:2.5px solid #fff;border-radius:10px;padding:3px 9px;
  transform:rotate(-14deg) scale(2.6);opacity:0;transition:transform .5s var(--spring),opacity .2s;box-shadow:0 0 0 4px rgba(255,255,255,.16)}
.hs.hit .hs-stamp{transform:rotate(-14deg) scale(1);opacity:1}
.hs.hit{animation:hsShake .45s}
@keyframes hsShake{20%{translate:-4px 0}40%{translate:4px 0}60%{translate:-2px 0}80%{translate:2px 0}}
.hs-days{display:flex;align-items:center;gap:3px;margin-top:10px}
.hs-days i{flex:1;height:7px;border-radius:4px;background:var(--bg2);position:relative;overflow:hidden}
.hs-days i::after{content:"";position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:0 50%;animation:dayFill 4.8s var(--ease) infinite}
.hs-days i:nth-child(2)::after{animation-delay:.22s}.hs-days i:nth-child(3)::after{animation-delay:.44s}.hs-days i:nth-child(4)::after{animation-delay:.66s}
.hs-days i:nth-child(5)::after{animation-delay:.88s}.hs-days i:nth-child(6)::after{animation-delay:1.1s}.hs-days i:nth-child(7)::after{animation-delay:1.32s}
@keyframes dayFill{0%{transform:scaleX(0)}12%,78%{transform:scaleX(1)}90%,100%{transform:scaleX(0)}}
.hs-days em{font-size:11.5px;font-weight:800;color:#fff;background:var(--blue);padding:2px 7px;border-radius:99px;white-space:nowrap;margin-left:4px}
.hs-ring{position:absolute;right:-26px;bottom:-26px;width:120px;height:120px;transform:rotate(-90deg);opacity:.9}
.hs-ring circle{fill:none;stroke:var(--blue-l);stroke-width:9}
.hs-ring .hs-ring-on{stroke:var(--blue);stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327;transition:stroke-dashoffset 2s var(--ease) .6s}
.hstat.go .hs-ring-on{stroke-dashoffset:0}
.hs-num{z-index:1}
@media(max-width:1023px){
  .hs-stamp{top:auto;bottom:40px;right:12px;font-size:13px}
  .hs-days{flex-wrap:wrap;gap:3px}
  .hs-days em{flex-basis:100%;max-width:max-content;margin:8px 0 0}
  .hs-ring{width:92px;height:92px;right:-24px;bottom:-24px;opacity:.55}
}
@media(max-width:380px){.hs{padding:16px 13px}.hs-lb{font-size:14px}}
@media(min-width:1024px){
  .hstat{grid-template-columns:repeat(4,1fr);gap:14px;margin-top:56px}
  .hs{padding:26px 24px 24px;border-radius:30px;min-height:228px}
  .hs-num{font-size:clamp(64px,6.4vw,84px);margin-top:8px}
  .hs-lb{font-size:16px}
  .hs-old,.hs-tag{font-size:14px}
  .hs-ft{font-size:13.5px}
  .hs-stamp{font-size:17px;right:20px;top:20px}
  .hs-ring{width:150px;height:150px;right:-34px;bottom:-34px}
}

/* 히어로 풀블리드 미디어: 슬라이드가 스퀴지로 닦듯 오른쪽 → 왼쪽으로 드러남 */
.hero-top{position:relative}
.hero-in{z-index:2}
.hero-media{position:absolute;left:0;right:0;bottom:0;height:440px;overflow:hidden;pointer-events:none;z-index:0}
.hm{position:absolute;inset:0;margin:0;clip-path:inset(0 0 0 100%);transition:clip-path 1.2s var(--ease)}
.hm.on{clip-path:inset(0);z-index:2}
.hm.prev{clip-path:inset(0);z-index:1;transition:none}
.hm img{width:100%;height:100%;object-fit:cover;object-position:74% 50%;transform:scale(1.12)}
.hm.on img,.hm.prev img{animation:hmZoom 8s linear forwards}
@keyframes hmZoom{from{transform:scale(1.14)}to{transform:scale(1.02)}}
.hm-bar{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none}
.hm-bar::before{content:"";position:absolute;top:0;bottom:0;right:-3px;width:6px;
  background:linear-gradient(180deg,#fff,#9cc8ff 50%,#fff);box-shadow:0 0 34px 8px rgba(156,200,255,.75)}
.hm-bar.go{animation:hmBar 1.2s var(--ease)}
@keyframes hmBar{0%{transform:translateX(0);opacity:1}85%{opacity:1}100%{transform:translateX(-100%);opacity:0}}
.hm-fade{position:absolute;inset:0;z-index:4;
  background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 26%),linear-gradient(0deg,#F4F9FF 0%,rgba(244,249,255,0) 24%)}
.hero-vis{position:relative;min-height:400px;padding:12px 6px 30px}
.hm-cap{position:absolute;right:4px;bottom:10px;z-index:3;display:flex;align-items:center;gap:12px;padding:9px 14px;border-radius:99px;
  background:rgba(255,255,255,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 14px 30px -16px rgba(25,31,40,.4);font-size:13px}
.hm-cap b{font-weight:800;color:var(--ink);min-width:7em}
.hm-cap b.pop{animation:fadeUp .5s var(--ease)}
.hm-dots{display:flex;gap:4px}
.hm-dots i{width:16px;height:4px;border-radius:2px;background:rgba(25,31,40,.15);overflow:hidden;position:relative}
.hm-dots i.on::after{content:"";position:absolute;inset:0;background:var(--blue);transform-origin:0 50%;animation:dotFill var(--hm-ms,5200ms) linear forwards}
@keyframes dotFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hstat{z-index:2}
.toast{position:absolute;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.8);border-radius:18px;padding:10px 14px 10px 10px;box-shadow:0 18px 40px -16px rgba(25,31,40,.35);
  opacity:0;animation:toastIn .7s var(--spring) forwards,bob 5s ease-in-out infinite;font-size:13px;max-width:250px}
.toast b{display:block;font-weight:700;color:var(--ink)}
.toast small{color:var(--gray);font-size:11.5px}
.t-ic{width:36px;height:36px;border-radius:12px;background:var(--blue-l);display:grid;place-items:center;font-size:18px;flex-shrink:0}
.t1{top:2%;left:-2%;animation-delay:1.3s,2s}
.t2{top:46%;right:-3%;animation-delay:1.7s,2.6s}
.t3{bottom:6%;left:2%;animation-delay:2.1s,3.2s}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.85)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
.rbadge{position:absolute;right:-4px;top:-10px;width:110px;height:110px;display:grid;place-items:center;z-index:2}
.rbadge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 14s linear infinite}
.rbadge text{font-size:9.5px;font-weight:800;fill:var(--blue);letter-spacing:.5px}
.rbadge b{width:60px;height:60px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:22px;font-weight:900;
  box-shadow:0 10px 24px -6px rgba(49,130,246,.7);animation:heart 1.6s ease-in-out infinite;line-height:1}
.rbadge b small{font-size:11px;display:block;margin-top:-14px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes heart{0%,100%{transform:scale(1)}15%{transform:scale(1.12)}30%{transform:scale(1)}45%{transform:scale(1.08)}}
.spk{position:absolute;color:var(--blue);animation:twinkle 2.2s ease-in-out infinite}
.s1{width:28px;height:28px;left:-8px;top:38%}
.s2{width:18px;height:18px;right:18%;bottom:-4px;color:#7db8ff;animation-delay:-.8s}
.s3{width:22px;height:22px;right:-6px;top:72%;color:var(--yellow);animation-delay:-1.4s}
.scroll-hint{position:absolute;left:50%;bottom:16px;width:26px;height:42px;border:2px solid var(--gray3);border-radius:14px;transform:translateX(-50%);display:none}
.scroll-hint i{position:absolute;left:50%;top:8px;width:4px;height:8px;border-radius:2px;background:var(--blue);transform:translateX(-50%);animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,14px)}}

@media(max-width:1023px){.t3{bottom:20%}}
@media(min-width:768px) and (max-width:1023px){.hero-media,.hero-vis{min-height:480px;height:500px}}
@media(min-width:1024px){
  .hero{padding:72px 0 110px}
  .hero-in{grid-template-columns:1.02fr 1fr;align-items:center;gap:48px}
  .hero-cta .btn{flex:0 0 auto}
  .hero-vis{min-height:560px}
  .hero-media{top:-72px;bottom:-60px;left:auto;width:62%;height:auto}
  .hero-media .hm img{object-position:70% 50%}
  .hm-fade{background:
    linear-gradient(90deg,#fff 0%,rgba(255,255,255,.96) 14%,rgba(255,255,255,.6) 30%,rgba(255,255,255,0) 50%),
    linear-gradient(0deg,#F4F9FF 0%,rgba(244,249,255,.7) 14%,rgba(244,249,255,0) 34%),
    linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 14%)}
  .hm-cap{right:0;bottom:0;font-size:14px}
  .rbadge{width:140px;height:140px;right:-30px;top:-30px}
  .rbadge b{width:76px;height:76px;font-size:28px}
  .rbadge text{font-size:9.5px}
  .t1{left:-14%}
  .t2{right:-10%}
  .t3{left:-8%}
  .scroll-hint{display:block}
}

/* ---------------------------------------------------- 크로스 밴드 */
.xband{position:relative;height:170px;overflow:hidden;background:#fff;margin:-30px 0 0}
.xb{position:absolute;left:-5%;width:110%;padding:14px 0;overflow:hidden;white-space:nowrap}
.xb-in{display:inline-flex;align-items:center;gap:28px;font-size:clamp(22px,3.4vw,34px);font-weight:850;letter-spacing:-.04em}
.xb i{font-style:normal;font-size:.7em}
.xb-a{top:52px;background:var(--blue);color:#fff;transform:rotate(-3deg);z-index:2;box-shadow:0 20px 40px -20px rgba(49,130,246,.7)}
.xb-a .xb-in{animation:marquee 22s linear infinite}
.xb-b{top:52px;background:var(--ink);color:#fff;transform:rotate(2.2deg)}
.xb-b .xb-in{animation:marquee 26s linear infinite reverse}
.xb-b i{color:var(--blue)}

/* ---------------------------------------------------- 섹션 공통 */
.sec{padding:96px 0;position:relative}
.sec-hd{text-align:center;margin-bottom:48px}
.sec-hd.left{text-align:left}
.sec h2{font-size:clamp(30px,4.6vw,52px);line-height:1.22;font-weight:850;letter-spacing:-.05em}
.sec-sub{margin-top:18px;font-size:clamp(16px,1.8vw,19px);color:var(--gray);line-height:1.65}
.sec-sub b{color:var(--ink);font-weight:700}
.strike{position:relative;color:var(--gray2);display:inline-block}
.strike::after{content:"";position:absolute;left:-4%;top:52%;height:.12em;width:0;background:var(--red);border-radius:4px;transform:rotate(-4deg);transition:width .7s var(--ease) .6s}
.go .strike::after,.strike.go::after{width:108%}

/* ---------------------------------------------------- 비교 */
.compare{background:#fff;padding-top:72px}
.vs{display:grid;gap:14px;align-items:stretch;position:relative}
.vs-card{border-radius:28px;padding:28px 24px;position:relative;overflow:hidden}
.vs-old{background:var(--bg2);color:var(--gray)}
.vs-new{background:linear-gradient(145deg,#4C9AFF,var(--blue-d));color:#fff;box-shadow:0 30px 60px -30px rgba(27,100,218,.8)}
.vs-new::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.12);top:-120px;right:-80px}
.vs-tag{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;margin-bottom:14px}
.vs-tag svg{width:26px;height:26px}
.vs-old .vs-tag{color:var(--gray)}
.vs-card ul{display:grid;gap:4px}
.vs-card li{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px dashed rgba(0,0,0,.08);font-size:15px;font-weight:600}
.vs-new li{border-color:rgba(255,255,255,.22)}
.vs-card li b{font-size:18px;font-weight:800;position:relative}
.vs-card .x{color:var(--ink2)}
.vs-card .x::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:3px;background:var(--red);border-radius:3px;transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.vs-old.go li:nth-child(1) .x::after{transform:scaleX(1);transition-delay:.5s}
.vs-old.go li:nth-child(2) .x::after{transform:scaleX(1);transition-delay:.75s}
.vs-old.go li:nth-child(3) .x::after{transform:scaleX(1);transition-delay:1s}
.vs-old.go li:nth-child(4) .x::after{transform:scaleX(1);transition-delay:1.25s}
.vs-card .o{opacity:0;transform:scale(.4);transition:opacity .4s,transform .6s var(--spring)}
.vs-new.go li:nth-child(1) .o{opacity:1;transform:none;transition-delay:.7s}
.vs-new.go li:nth-child(2) .o{opacity:1;transform:none;transition-delay:.95s}
.vs-new.go li:nth-child(3) .o{opacity:1;transform:none;transition-delay:1.2s}
.vs-new.go li:nth-child(4) .o{opacity:1;transform:none;transition-delay:1.45s}
.vs-sum{margin-top:18px;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:space-between}
.vs-old .vs-sum b{color:var(--red);font-size:22px}
.zero-stamp{display:inline-grid;place-items:center;width:84px;height:84px;border-radius:50%;border:3px solid #fff;font-size:26px;font-weight:900;transform:rotate(-12deg) scale(2.2);opacity:0;
  transition:transform .5s var(--spring) 1.8s,opacity .2s 1.8s;box-shadow:0 0 0 6px rgba(255,255,255,.18)}
.vs-new.go .zero-stamp{transform:rotate(-12deg) scale(1);opacity:1}
.vs-mid{display:grid;place-items:center;margin:-34px auto;z-index:2;position:relative}
.vs-mid span{width:58px;height:58px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:900;font-size:18px;border:5px solid #fff;
  animation:heart 2s ease-in-out infinite}
@media(min-width:900px){
  .vs{grid-template-columns:1fr auto 1fr;gap:0}
  .vs-mid{margin:0 -30px}
  .vs-card{padding:40px 40px 36px}
  .vs-new{transform:scale(1.03)}
  .vs-new.rv-r.go{transform:scale(1.03)}
}

.save{margin-top:56px;display:grid;gap:28px;align-items:center;background:var(--bg3);border:1px solid var(--line);border-radius:32px;padding:32px 24px}
.save-txt p{font-size:17px;color:var(--gray);font-weight:600}
.save-txt h3{font-size:clamp(28px,4vw,44px);font-weight:850;letter-spacing:-.05em;margin-top:6px;line-height:1.25}
.save-txt h3 b{color:var(--blue);font-variant-numeric:tabular-nums}
.save-txt small{display:block;margin-top:12px;color:var(--gray2);font-size:12.5px}
.scratch{position:relative;height:200px;border-radius:24px;overflow:hidden;background:linear-gradient(145deg,#4C9AFF,var(--blue-d));color:#fff;user-select:none;touch-action:none}
.scratch-under{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.scratch-under small{font-size:15px;opacity:.85;font-weight:600}
.scratch-under b{font-size:68px;font-weight:900;letter-spacing:-.05em;line-height:1.05;text-shadow:0 8px 30px rgba(0,0,0,.2)}
.scratch-under span{font-size:14px;font-weight:700;background:rgba(255,255,255,.2);padding:4px 12px;border-radius:99px}
.scratch canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;transition:opacity .6s}
.scratch.done canvas{opacity:0;pointer-events:none}
.scratch-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(25,31,40,.75);color:#fff;font-size:13px;font-weight:600;padding:6px 14px;border-radius:99px;
  pointer-events:none;transition:opacity .3s;white-space:nowrap}
.scratch-hint span{display:inline-block;animation:scrub 1.2s ease-in-out infinite}
@keyframes scrub{0%,100%{transform:translateX(-4px) rotate(-10deg)}50%{transform:translateX(4px) rotate(10deg)}}
.scratch.touched .scratch-hint,.scratch.done .scratch-hint{opacity:0}
@media(min-width:900px){.save{grid-template-columns:1.2fr 1fr;padding:44px 48px}.scratch{height:230px}}

/* ---------------------------------------------------- 왜 무료? (매니페스토) */
.why{background:#0B1630;color:#fff;overflow:hidden;padding:110px 0}
.why-glow{position:absolute;width:1000px;height:1000px;left:50%;top:-420px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(49,130,246,.32),transparent 62%);animation:breathe 7s ease-in-out infinite}
.why .wrap{position:relative}
.why-q{font-size:clamp(18px,2.2vw,24px);font-weight:700;color:#8EA4C8;margin-bottom:22px}
.sec .why-txt{font-size:clamp(30px,5vw,62px);line-height:1.32;font-weight:850;letter-spacing:-.05em;max-width:1040px}
.why-txt .w{opacity:.14;transition:opacity .4s,color .4s}
.why-txt .w.on{opacity:1}
.why-txt em .w.on{color:#5AA9FF}
.model{display:grid;gap:14px;margin-top:64px}
.model-card{border-radius:28px;padding:28px 22px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04)}
.m-new{background:linear-gradient(150deg,#3D8BFF,#1450B8);border:0;box-shadow:0 40px 80px -40px rgba(49,130,246,.8)}
.m-tag{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:#8EA4C8}
.m-new .m-tag{color:#fff}
.m-tag svg{width:26px;height:26px}
.m-flow{margin:20px 0;display:grid;gap:8px;counter-reset:m}
.m-flow li{position:relative;padding:14px 16px 14px 54px;border-radius:16px;background:rgba(255,255,255,.06)}
.m-flow li::before{counter-increment:m;content:counter(m);position:absolute;left:15px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:13px;font-weight:800}
.m-new .m-flow li{background:rgba(255,255,255,.14)}
.m-new .m-flow li::before{background:#fff;color:var(--blue)}
.m-flow b{display:block;font-size:16.5px;font-weight:800}
.m-flow small{font-size:13.5px;opacity:.7}
.m-old .m-end b{color:#FF8A94}
.m-sum{font-size:15.5px;font-weight:700;padding-top:16px;border-top:1px dashed rgba(255,255,255,.18)}
.m-sum b{font-size:18px;color:#8EA4C8}
.m-new .m-sum b{color:#fff;background:rgba(255,255,255,.18);padding:2px 9px;border-radius:8px}
.model-card.go .m-flow li{animation:mIn .6s var(--spring) both}
.model-card.go .m-flow li:nth-child(2){animation-delay:.15s}.model-card.go .m-flow li:nth-child(3){animation-delay:.3s}
@keyframes mIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(min-width:900px){.why{padding:150px 0}.model{grid-template-columns:1fr 1fr;gap:20px;margin-top:88px}.model-card{padding:36px}}

/* ---------------------------------------------------- 7일 커리큘럼 (스토리형) */
.curri{background:var(--bg3);overflow:hidden}
.curri .sec-hd{margin-bottom:36px}
.cv{display:grid;gap:14px}
.cv-stage{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:4/4.4;background:#0B1630;box-shadow:0 40px 80px -46px rgba(14,52,120,.8);isolation:isolate}
.cv-bars{position:absolute;left:16px;right:16px;top:16px;z-index:5;display:flex;gap:4px}
.cv-bars i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden;position:relative}
.cv-bars i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.cv-bars i.done::after{transform:scaleX(1)}
.cv-bars i.on::after{transform:scaleX(var(--p,0))}
.cv-f{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .7s var(--ease);z-index:1}
.cv-f.on{opacity:1;z-index:2}
.cv-f img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 4.5s var(--ease)}
.cv-f.on img{transform:scale(1)}
.cv-f::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,22,48,.45) 0%,rgba(11,22,48,0) 22%,rgba(11,22,48,0) 42%,rgba(11,22,48,.88) 100%)}
.cv-f figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 20px 24px;color:#fff}
.cv-f figcaption>*{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.cv-f.on figcaption>*{opacity:1;transform:none}
.cv-f.on figcaption b{transition-delay:.1s}
.cv-f.on figcaption p{transition-delay:.2s}
.cv-f figcaption span{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.12em;padding:5px 10px;border-radius:99px;background:var(--blue)}
.cv-go figcaption span{background:#fff;color:var(--blue)}
.cv-f figcaption b{display:block;margin-top:10px;font-size:clamp(26px,3.4vw,40px);font-weight:850;letter-spacing:-.05em;line-height:1.2}
.cv-f figcaption p{margin-top:6px;font-size:15px;opacity:.88}
.cv-num{position:absolute;right:18px;top:30px;z-index:4;font-size:clamp(64px,10vw,120px);font-weight:900;letter-spacing:-.06em;line-height:1;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.75);font-variant-numeric:tabular-nums}
.cv-num.pop{animation:cvNum .6s var(--spring)}
@keyframes cvNum{from{opacity:0;transform:translateY(24px) scale(.9)}to{opacity:1;transform:none}}
.cv-nav{position:absolute;top:50%;z-index:5;width:44px;height:44px;margin-top:-22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:18px;
  background:rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.35);transition:background .2s,transform .2s}
.cv-nav:hover{background:rgba(255,255,255,.32)}
.cv-prev{left:12px}.cv-prev svg{transform:rotate(180deg)}
.cv-next{right:12px}
.cv-list{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 0 6px;margin:0 -20px;padding-left:20px;padding-right:20px;scroll-padding:0 20px}
.cv-list::-webkit-scrollbar{display:none}
.cv-list li{flex:0 0 116px;scroll-snap-align:start}
.cv-list button{position:relative;display:block;width:100%;text-align:left;border-radius:16px;overflow:hidden;background:#fff;border:2px solid transparent;
  transition:border-color .3s,transform .35s var(--spring),box-shadow .3s}
.cv-list img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.6) brightness(1.05);opacity:.75;transition:filter .4s,opacity .4s}
.cv-list span{display:block;padding:8px 10px 10px}
.cv-list em{display:block;font-size:10.5px;font-weight:900;letter-spacing:.1em;color:var(--gray2)}
.cv-list b{display:block;font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}
.cv-list li.done img{filter:none;opacity:.95}
.cv-list li.on button{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(49,130,246,.8)}
.cv-list li.on img{filter:none;opacity:1}
.cv-list li.on em{color:var(--blue)}
.cv-list li.on b{color:var(--ink)}
.cl-go button{background:var(--blue-l)}
.curri-note{margin-top:18px;font-size:12.5px;color:var(--gray2);text-align:center}
@media(min-width:768px){.cv-stage{aspect-ratio:16/10}.cv-f figcaption{padding:32px 36px 34px}.cv-num{right:30px;top:36px}}
@media(min-width:1024px){
  .cv{grid-template-columns:1.6fr 1fr;gap:18px;align-items:stretch}
  .cv-stage{aspect-ratio:auto;min-height:560px;border-radius:32px}
  .cv-bars{left:24px;right:24px;top:22px}
  .cv-f figcaption{padding:40px 44px 44px}
  .cv-f figcaption p{font-size:17px}
  .cv-nav{width:52px;height:52px;margin-top:-26px}
  .cv-prev{left:20px}.cv-next{right:20px}
  .cv-list{display:grid;grid-template-rows:repeat(8,1fr);gap:6px;overflow:visible;margin:0;padding:0}
  .cv-list button{display:flex;align-items:center;gap:14px;height:100%;padding:6px;border-radius:16px;border:1px solid var(--line)}
  .cv-list img{width:84px;height:100%;min-height:52px;aspect-ratio:auto;border-radius:11px;flex-shrink:0}
  .cv-list span{padding:0}
  .cv-list em{font-size:11px}
  .cv-list b{font-size:15.5px}
  .cv-list button::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:0 50%}
  .cv-list li.on button{border-color:#bcdaff;transform:translateX(-6px);background:#fff}
  .cv-list li.on button::after{transform:scaleX(var(--p,0))}
  .cl-go button{background:var(--blue-l)}
}

/* ---------------------------------------------------- 현장 갤러리 */
.field{background:#fff}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fd{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:3/4;background:var(--bg2);clip-path:inset(0 100% 0 0 round 22px);
  transition:clip-path 1.2s var(--ease);transition-delay:var(--d,0s)}
.fd.go{clip-path:inset(0 0 0 0 round 22px)}
.fd img{width:100%;height:100%;object-fit:cover;transform:scale(1.25);transition:transform 1.8s var(--ease);transition-delay:var(--d,0s)}
.fd.go img{transform:scale(1)}
.fd.go:hover img{transform:scale(1.07);transition-delay:0s;transition-duration:.8s}
.fd::before{content:"";position:absolute;inset:auto 0 0;height:62%;background:linear-gradient(180deg,transparent,rgba(9,26,58,.82));z-index:1}
.fd::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,#fff,#9cc8ff) left top/8px 100% no-repeat,linear-gradient(90deg,rgba(156,200,255,.75),rgba(156,200,255,0) 32px) left top/40px 100% no-repeat}
.fd.go::after{animation:fdSweep 1.2s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes fdSweep{0%{transform:translateX(0);opacity:1}88%{opacity:1}100%{transform:translateX(100%);opacity:0}}
.fd-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 14px;color:#fff;z-index:3}
.fd-cap span{font-size:11.5px;font-weight:800;letter-spacing:.1em;opacity:.7}
.fd-cap b{display:block;font-size:17px;font-weight:800;letter-spacing:-.04em;margin-top:2px}
.fd-cap small{display:block;font-size:12.5px;opacity:.85;margin-top:3px;line-height:1.45}
@media(min-width:1024px){
  .fields{grid-template-columns:repeat(4,1fr);gap:16px}
  .fd{border-radius:28px;clip-path:inset(0 100% 0 0 round 28px)}
  .fd.go{clip-path:inset(0 0 0 0 round 28px)}
  .fd:nth-child(even){margin-top:56px}
  .fd-cap{padding:22px 20px}
  .fd-cap b{font-size:21px}
  .fd-cap small{font-size:14px}
}

/* ---------------------------------------------------- 혜택 bento */
.benefit{background:linear-gradient(180deg,#fff,var(--blue-ll))}
.bento{display:grid;gap:14px}
.bn{position:relative;background:#fff;border:1px solid var(--line);border-radius:28px;padding:28px 24px 26px;overflow:hidden;
  transition:transform .4s var(--spring),box-shadow .4s,border-color .4s}
.bn .no{position:absolute;top:22px;right:24px;font-size:44px;font-weight:900;color:var(--bg2);letter-spacing:-.04em;line-height:1;transition:color .4s}
.bn .b3d{width:92px;height:92px;margin:-6px 0 10px -8px;animation:float3d 4s ease-in-out infinite;transition:transform .5s var(--spring)}
.bn:nth-child(2) .b3d{animation-delay:-1s}.bn:nth-child(3) .b3d{animation-delay:-2s}.bn:nth-child(4) .b3d{animation-delay:-3s}.bn:nth-child(5) .b3d{animation-delay:-1.5s}
@keyframes float3d{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
.bn h3{font-size:23px;line-height:1.32;font-weight:800;letter-spacing:-.045em}
.bn h3 em{color:var(--blue)}
.bn p{margin-top:10px;color:var(--gray);font-size:15.5px;line-height:1.6}
.bn p b{color:var(--ink)}
.bn.on,.bn:hover{border-color:#b9d8ff;box-shadow:0 30px 60px -32px rgba(49,130,246,.6);transform:translateY(-6px)}
.bn.on .no,.bn:hover .no{color:var(--blue-l)}
.bn.on .b3d{transform:scale(1.12) rotate(-6deg)}
.bn-strike{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.bn-strike s{font-size:13px;font-weight:700;color:var(--gray2);background:var(--bg2);padding:5px 10px;border-radius:8px;text-decoration-color:var(--red);text-decoration-thickness:2px}
.bn-1{background:linear-gradient(150deg,var(--blue) 0%,var(--blue-dd) 100%);border:0;color:#fff}
.bn-1 h3{font-size:clamp(30px,3.6vw,44px)}
.bn-1 h3 em{color:#fff;background:rgba(255,255,255,.18);padding:0 8px;border-radius:10px}
.bn-1 p{color:rgba(255,255,255,.85)}
.bn-1 p b{color:#fff}
.bn-1 .no{color:rgba(255,255,255,.14)}
.bn-1.on .no,.bn-1:hover .no{color:rgba(255,255,255,.24)}
.bn-1 .b3d{border-radius:28px;width:120px;height:120px}
.bn-1 .bn-strike s{background:rgba(255,255,255,.14);color:rgba(255,255,255,.8);text-decoration-color:#ffd1d5}
@media(min-width:768px){.bento{grid-template-columns:1fr 1fr}.bn-1{grid-column:1/-1}}
@media(min-width:1024px){
  .bento{grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto}
  .bn-1{grid-column:1;grid-row:1/3;display:flex;flex-direction:column;justify-content:flex-end;padding:40px 36px}
  .bn-1 .b3d{width:170px;height:170px;margin-bottom:auto}
}
/* 마우스 스포트라이트 */
.fx-host{isolation:isolate}
.fx-sl{position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(49,130,246,.13),transparent 60%);z-index:-1}
.bn-1 .fx-sl{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2),transparent 60%)}
.fx-host:hover .fx-sl{opacity:1}

/* ---------------------------------------------------- 교육 과정 */
.course{background:#fff}
.course-in{display:grid;gap:44px;align-items:center}
.course-vis{position:relative;border-radius:32px;overflow:visible}
.course-vis img{border-radius:32px;box-shadow:0 40px 70px -40px rgba(25,31,40,.5)}
.dday{position:absolute;right:-6px;bottom:-24px;background:var(--ink);color:#fff;border-radius:24px;padding:16px 22px;text-align:center;box-shadow:0 20px 40px -16px rgba(0,0,0,.5);
  animation:bob 4.5s ease-in-out infinite}
.dday small{font-size:12px;color:var(--gray3);display:block}
.dday b{display:block;font-size:44px;font-weight:900;color:#5AA9FF;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums}
.dday>span{font-size:13px;font-weight:700}
.steps{display:grid;gap:10px;margin-top:32px}
.steps li{position:relative;display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:20px;background:var(--bg3);border:1px solid var(--line);
  transition:background .4s,border-color .4s,transform .4s var(--spring);overflow:hidden;cursor:pointer}
.st-no{flex-shrink:0;width:64px;height:44px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-size:14px;font-weight:800;color:var(--gray);transition:.4s}
.steps b{display:block;font-size:17px;font-weight:800}
.steps small{color:var(--gray);font-size:14px}
.steps .bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:transparent}
.steps .bar i{display:block;height:100%;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:0 50%}
.steps li.on{background:var(--blue-l);border-color:#bcdaff;transform:translateX(6px)}
.steps li.on .st-no{background:var(--blue);color:#fff;border-color:var(--blue)}
@media(min-width:1024px){.course-in{grid-template-columns:1fr 1fr;gap:72px}.dday{right:-24px}}

/* ---------------------------------------------------- 오더 배정 */
.order{background:linear-gradient(180deg,var(--blue-ll),#fff);overflow:hidden}
.order-in{display:grid;gap:56px;align-items:center}
.order-pts{display:grid;gap:12px;margin-top:28px}
.order-pts li{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:700}
.order-pts i{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:16px}
.big365{display:flex;align-items:center;gap:12px;margin-top:32px}
.big365 b{font-size:clamp(84px,12vw,140px);font-weight:900;letter-spacing:-.06em;line-height:.9;
  background:linear-gradient(180deg,#5AA9FF,var(--blue-dd));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.big365 span{font-size:20px;font-weight:800;line-height:1.3;color:var(--ink2)}
.phone{position:relative;width:min(330px,88vw);margin:0 auto;aspect-ratio:9/18.5;background:#0f141a;border-radius:46px;padding:12px;
  box-shadow:0 50px 90px -40px rgba(27,100,218,.65),inset 0 0 0 2px #2a313a}
.phone::before{content:"";position:absolute;inset:-60px;background:radial-gradient(circle,rgba(49,130,246,.25),transparent 60%);z-index:-1;animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.1);opacity:.6}}
.ph-notch{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:96px;height:26px;border-radius:20px;background:#0f141a;z-index:3}
.ph-scr{height:100%;border-radius:36px;background:var(--bg2);overflow:hidden;padding:56px 14px 14px;display:flex;flex-direction:column}
.ph-top{display:flex;align-items:center;gap:8px;font-size:17px}
.ph-top>svg{width:26px;height:26px}
.ph-bell{margin-left:auto;position:relative;color:var(--ink2);font-size:20px;display:flex}
.ph-bell i{position:absolute;top:-6px;right:-8px;min-width:17px;height:17px;border-radius:9px;background:var(--red);color:#fff;font-size:10.5px;font-style:normal;font-weight:800;display:grid;place-items:center;padding:0 4px}
.ph-bell.ring{animation:ring .6s}
@keyframes ring{20%{transform:rotate(18deg)}40%{transform:rotate(-14deg)}60%{transform:rotate(10deg)}80%{transform:rotate(-6deg)}}
.ph-sum{margin:14px 0 12px;background:#fff;border-radius:18px;padding:14px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ph-sum small{width:100%;color:var(--gray);font-size:12px;font-weight:600}
.ph-sum b{font-size:28px;font-weight:850;letter-spacing:-.04em;color:var(--ink)}
.ph-pill{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--blue);background:var(--blue-l);padding:4px 9px;border-radius:99px}
.ph-list{display:flex;flex-direction:column;gap:8px;overflow:hidden;flex:1}
.ph-list li{background:#fff;border-radius:16px;padding:12px 14px;display:flex;align-items:center;gap:10px;animation:orderIn .6s var(--spring)}
.ph-list li.new{box-shadow:0 0 0 2px var(--blue) inset}
.ph-list .oi{width:38px;height:38px;border-radius:12px;background:var(--blue-l);display:grid;place-items:center;font-size:18px;flex-shrink:0}
.ph-list b{display:block;font-size:14px}
.ph-list small{font-size:11.5px;color:var(--gray)}
.ph-list em{margin-left:auto;font-size:11px;font-weight:800;padding:4px 8px;border-radius:8px;background:var(--blue);color:#fff;white-space:nowrap}
.ph-list em.done{background:var(--bg2);color:var(--gray)}
@keyframes orderIn{from{opacity:0;transform:translateY(-24px) scale(.9)}to{opacity:1;transform:none}}
.ph-note{position:absolute;bottom:-34px;left:0;right:0;text-align:center;font-size:12px;color:var(--gray2)}
@media(min-width:1024px){.order-in{grid-template-columns:1.1fr 1fr}}

/* ---------------------------------------------------- 스케줄 */
.sched{background:#fff}
.week{max-width:760px;margin:0 auto;background:var(--bg3);border:1px solid var(--line);border-radius:32px;padding:28px 20px;text-align:center}
.week-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.week-days button{aspect-ratio:1;border-radius:16px;background:#fff;border:1px solid var(--line);font-size:17px;font-weight:800;color:var(--gray2);
  transition:transform .35s var(--spring),background .25s,color .25s,box-shadow .25s}
.week-days button:hover{transform:translateY(-3px)}
.week-days button.on{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 12px 24px -10px rgba(49,130,246,.7);transform:translateY(-4px)}
.week-days button:nth-child(6){color:#4c8be0}.week-days button:nth-child(7){color:#e06b78}
.week-days button.on:nth-child(6),.week-days button.on:nth-child(7){color:#fff}
.week-out{margin:26px 0 22px}
.week-out p{font-size:16px;font-weight:600;color:var(--gray)}
.week-out p span{color:var(--ink);font-weight:800}
.week-out b{display:block;font-size:clamp(40px,6vw,56px);font-weight:900;color:var(--blue);letter-spacing:-.05em;line-height:1.15}
.week-out b span{display:inline-block}
.week-out b span.pop{animation:popnum .45s var(--spring)}
@keyframes popnum{from{transform:scale(1.6)}to{transform:none}}
.week-out small{display:block;font-size:15px;color:var(--ink2);font-weight:600}
@media(min-width:768px){.week{padding:40px}.week-days{gap:12px}.week-days button{font-size:20px;border-radius:20px}}

/* ---------------------------------------------------- 전국 지도 */
.area{background:linear-gradient(180deg,#fff,var(--blue-ll));overflow:hidden}
.area-grid{display:grid;gap:40px;align-items:center}
.map-wrap{position:relative;max-width:470px;width:100%;margin:0 auto}
.map{position:relative;width:100%}
.map-svg{display:block;width:100%;height:auto;overflow:visible}
.map .rg{stroke:#C9DCF5;transition:stroke .6s}
.map .isle{font-size:13px;font-weight:700;fill:var(--gray2);stroke:none;text-anchor:middle}
.map[data-rg="sd"] .rg-sd,.map[data-rg="cc"] .rg-cc,.map[data-rg="hn"] .rg-hn,.map[data-rg="yn"] .rg-yn,.map[data-rg="gw"] .rg-gw,.map[data-rg="jj"] .rg-jj{stroke:var(--blue)}
.pin{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#fff;border:2.5px solid var(--blue-d);transform:scale(0);
  transition:transform .5s var(--spring),background .3s;transition-delay:calc(var(--d,0s) + .4s),0s;z-index:1}
.map.go .pin{transform:scale(1)}
.pin{cursor:pointer;font-style:normal}
.pin.major{width:15px;height:15px;margin:-7.5px 0 0 -7.5px;z-index:2}
.pin b{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);padding:4px 9px;border-radius:9px;background:var(--ink);color:#fff;font-size:13px;font-weight:800;
  white-space:nowrap;transition:background .3s,transform .4s var(--spring)}
.pin b::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--ink);transition:border-color .3s}
.pin::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--blue);opacity:0}
.map[data-rg="sd"] .pin-sd,.map[data-rg="cc"] .pin-cc,.map[data-rg="hn"] .pin-hn,.map[data-rg="yn"] .pin-yn,.map[data-rg="gw"] .pin-gw,.map[data-rg="jj"] .pin-jj{background:var(--blue);border-color:#fff;box-shadow:0 4px 12px rgba(49,130,246,.6)}
.map[data-rg="sd"] .pin-sd::after,.map[data-rg="cc"] .pin-cc::after,.map[data-rg="hn"] .pin-hn::after,.map[data-rg="yn"] .pin-yn::after,.map[data-rg="gw"] .pin-gw::after,.map[data-rg="jj"] .pin-jj::after{animation:hot 1.5s ease-out infinite}
.map[data-rg="sd"] .pin-sd b,.map[data-rg="cc"] .pin-cc b,.map[data-rg="hn"] .pin-hn b,.map[data-rg="yn"] .pin-yn b,.map[data-rg="gw"] .pin-gw b,.map[data-rg="jj"] .pin-jj b{background:var(--blue);transform:translateX(-50%) scale(1.12)}
.map[data-rg="sd"] .pin-sd b::after,.map[data-rg="cc"] .pin-cc b::after,.map[data-rg="hn"] .pin-hn b::after,.map[data-rg="yn"] .pin-yn b::after,.map[data-rg="gw"] .pin-gw b::after,.map[data-rg="jj"] .pin-jj b::after{border-top-color:var(--blue)}
@keyframes hot{0%{transform:scale(.5);opacity:1}100%{transform:scale(2.4);opacity:0}}
.map-call{display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;max-width:100%;margin:14px auto 0;background:#fff;border-radius:99px;padding:10px 18px;
  font-size:14px;font-weight:700;box-shadow:0 18px 40px -18px rgba(27,100,218,.55);border:1px solid #DCE9FB}
.map-call b{display:inline-block;color:var(--blue)}
.map-call b.pop{animation:popnum .45s var(--spring)}
.regions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.regions li{position:relative;padding:14px 14px 16px;border-radius:18px;background:#fff;border:1.5px solid var(--line);cursor:pointer;overflow:hidden;
  transition:background .35s,border-color .35s,color .35s,transform .35s var(--spring),box-shadow .35s}
.regions li:hover{border-color:#bcdaff}
.regions header{display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.regions h3{font-size:15.5px;font-weight:800;letter-spacing:-.04em;line-height:1.35}
.regions em{flex-shrink:0;display:flex;align-items:center;gap:4px;font-size:11px;font-weight:800;color:var(--blue);background:var(--blue-l);padding:3px 8px;border-radius:99px;white-space:nowrap}
.regions em::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:blink 1.2s steps(1) infinite}
.regions p{margin-top:6px;font-size:12.5px;color:var(--gray);line-height:1.5}
.regions .rbar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--blue)}
.regions li.on{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-3px);box-shadow:0 18px 34px -18px rgba(25,31,40,.6)}
.regions li.on p{color:var(--gray3)}
.regions li.on em{background:var(--blue);color:#fff}
.regions li.on .rbar{width:100%;transition:width 2.4s linear}
#areaApply{white-space:normal;text-align:center;line-height:1.3}
@media(min-width:560px){.map-call{position:absolute;right:0;bottom:3%;margin:0}}
@media(min-width:1024px){
  .area-grid{grid-template-columns:1fr 1fr;gap:64px}
  .map-wrap{max-width:520px}
  .pin b{font-size:14px}
  .regions{gap:10px}
  .regions li{padding:18px 18px 20px}
  .regions h3{font-size:17px}
  .regions p{font-size:13.5px}
}

/* ---------------------------------------------------- 대상 */
.who{background:linear-gradient(180deg,#fff,var(--blue-ll))}
.who-in{display:grid;gap:44px;align-items:center}
.checks{display:grid;gap:12px;margin-top:32px}
.checks li{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 20px;transition:transform .35s var(--spring),box-shadow .35s}
.checks li:hover{transform:translateX(6px);box-shadow:0 18px 40px -26px rgba(49,130,246,.7)}
.checks i{width:40px;height:40px;border-radius:14px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:20px;flex-shrink:0}
.checks i svg path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .6s var(--ease) .5s}
.checks li.go i svg path{stroke-dashoffset:0}
.checks b{display:block;font-size:18px;font-weight:800}
.checks small{color:var(--gray);font-size:14.5px}
.who-vis{position:relative}
.who-vis>img{border-radius:32px;box-shadow:0 40px 70px -40px rgba(25,31,40,.5)}
.who-badge{position:absolute;left:-10px;bottom:-26px;display:flex;align-items:center;gap:6px;background:#fff;border-radius:24px;padding:8px 20px 8px 8px;
  box-shadow:0 24px 50px -20px rgba(25,31,40,.4);animation:bob 4s ease-in-out infinite}
.who-badge img{width:68px;height:68px;animation:drive 2.6s ease-in-out infinite}
@keyframes drive{0%,100%{transform:translateX(0)}50%{transform:translateX(6px) rotate(-2deg)}}
.who-badge span{font-size:14px;font-weight:700;line-height:1.3}
.who-badge b{font-size:24px;color:var(--blue);font-weight:900}
@media(min-width:1024px){.who-in{grid-template-columns:1fr 1.05fr;gap:72px}.who-badge{left:-34px}}

/* ---------------------------------------------------- 팀 배너 */
.team{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden;color:#fff}
.team-bg{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;object-position:50% 30%;will-change:transform}
.team::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,52,120,.92) 0%,rgba(27,100,218,.78) 45%,rgba(27,100,218,.25) 100%)}
.team-ov{position:relative;z-index:1;width:100%;max-width:1180px;margin:0 auto;padding:80px 20px}
.team-ov p{font-size:18px;font-weight:700;opacity:.92}
.team-ov h2{font-size:clamp(34px,5.4vw,62px);line-height:1.2;font-weight:900;letter-spacing:-.05em;margin:14px 0 30px}
.team-ov h2 em{color:#BFE0FF}
@media(max-width:767px){.team::after{background:linear-gradient(180deg,rgba(14,52,120,.55) 0%,rgba(27,100,218,.9) 70%)}.team{align-items:flex-end}}

/* ---------------------------------------------------- FAQ */
.faq{background:#fff}
.faq-in{display:grid;gap:24px}
.faq-list{display:grid;gap:10px}
.faq details{background:var(--bg3);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:background .3s,border-color .3s}
.faq details[open]{background:#fff;border-color:#bcdaff;box-shadow:0 20px 40px -30px rgba(49,130,246,.6)}
.faq summary{list-style:none;cursor:pointer;padding:20px 56px 20px 22px;font-size:17px;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";color:var(--blue);font-weight:900;margin-right:10px}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;border-right:2.5px solid var(--gray2);border-bottom:2.5px solid var(--gray2);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);border-color:var(--blue)}
.faq details p{padding:0 22px 22px 46px;color:var(--ink2);font-size:15.5px;line-height:1.7;animation:fadeDown .4s var(--ease)}
.faq details p b{color:var(--blue)}
@keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(min-width:1024px){.faq-in{grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}.faq .sec-hd{position:sticky;top:120px}}

/* ---------------------------------------------------- 지원 폼 */
.apply{background:linear-gradient(150deg,#3D8BFF 0%,var(--blue-d) 55%,#0b3f9c 100%);color:#fff;overflow:hidden}
.apply-bg{position:absolute;inset:0;pointer-events:none}
.apply .b1{width:460px;height:460px;background:#6fb2ff;top:-160px;left:-120px;opacity:.45}
.apply .b2{width:380px;height:380px;background:#0a2f78;bottom:-160px;right:-80px;opacity:.6}
.apply-in{position:relative;display:grid;gap:44px;align-items:center}
.apply h2{color:#fff}
.apply h2 em{color:#BFE0FF}
.apply-txt>p{margin-top:16px;font-size:18px;opacity:.9;line-height:1.6}
.flow{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:30px}
.flow li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 16px;font-weight:700;font-size:15px;backdrop-filter:blur(6px)}
.flow b{display:block;font-size:12px;opacity:.7;margin-bottom:2px;letter-spacing:.06em}
.form{background:#fff;color:var(--ink);border-radius:32px;padding:28px 22px;box-shadow:0 50px 90px -40px rgba(0,0,0,.55);position:relative}
.form-hd{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.form-hd svg{width:44px;height:44px}
.form-hd b{display:block;font-size:19px;font-weight:800}
.form-hd small{font-size:13px;color:var(--blue);font-weight:700}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fld{display:block;margin-bottom:14px}
.fld>span{display:block;font-size:14px;font-weight:700;color:var(--ink2);margin-bottom:7px}
.fld>span small{color:var(--gray2);font-weight:500}
.fld input,.fld select,.fld textarea{width:100%;height:54px;padding:0 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--bg3);font-size:16px;
  transition:border-color .2s,background .2s,box-shadow .2s;appearance:none;-webkit-appearance:none}
.fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%238B95A1' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:20px}
.fld textarea{height:auto;padding:14px 16px;resize:vertical;min-height:72px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(49,130,246,.14)}
.fld input.err{border-color:var(--red);animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--bg2);padding:4px;border-radius:14px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg i{display:block;font-style:normal;text-align:center;padding:11px 4px;border-radius:11px;font-size:14.5px;font-weight:700;color:var(--gray);transition:all .25s var(--ease)}
.seg input:checked+i{background:#fff;color:var(--blue);box-shadow:0 4px 12px -4px rgba(0,0,0,.18)}
.seg input:focus-visible+i{outline:2px solid var(--blue)}
.agree{display:flex;align-items:center;gap:10px;margin:6px 0 18px;font-size:14px;color:var(--ink2);cursor:pointer}
.agree input{position:absolute;opacity:0}
.agree i{width:24px;height:24px;border-radius:8px;border:1.5px solid var(--gray3);display:grid;place-items:center;color:#fff;font-size:15px;transition:.2s;flex-shrink:0}
.agree input:checked+i{background:var(--blue);border-color:var(--blue)}
.agree input:focus-visible+i{outline:2px solid var(--blue);outline-offset:2px}
.agree a{color:var(--gray);text-decoration:underline}
.form-msg{margin-top:12px;font-size:14px;font-weight:600;color:var(--blue);text-align:center;min-height:1.2em}
.form-msg.err{color:var(--red)}
.form.done .submit{background:#12B76A}
@media(min-width:1024px){.apply-in{grid-template-columns:1fr 470px;gap:72px}.form{padding:36px 32px}.flow{grid-template-columns:repeat(4,1fr)}}

/* ---------------------------------------------------- 푸터 · 플로팅 */
.ft{background:var(--bg2);padding:44px 0 120px;color:var(--gray);font-size:13.5px}
.ft-in{display:grid;gap:10px}
.ft .brand{margin-bottom:8px}
.ft-disc{color:var(--gray2);font-size:12.5px}
.ft-copy{color:var(--gray3);font-size:12px}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .4s var(--ease)}
.mbar.show{transform:none}
.mbar-tel{width:56px;height:56px;border-radius:16px;background:var(--blue-l);color:var(--blue);display:grid;place-items:center;font-size:22px;flex-shrink:0}
.mbar-go{flex:1;height:56px;border-radius:16px;background:var(--blue);color:#fff;font-weight:800;font-size:16.5px;display:grid;place-items:center;position:relative;overflow:hidden}
.fab{position:fixed;right:28px;bottom:28px;z-index:90;width:96px;height:96px;border-radius:50%;background:var(--blue);color:#fff;display:none;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 20px 40px -12px rgba(49,130,246,.8);transform:scale(0);transition:transform .45s var(--spring)}
.fab b{font-size:26px;font-weight:900;line-height:1}
.fab span{font-size:13px;font-weight:700}
.fab::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--blue);animation:ping 1.8s infinite;opacity:.5}
.fab.show{transform:scale(1)}
.fab:hover{transform:scale(1.08) rotate(-6deg)}
@media(min-width:1024px){.mbar{display:none}.fab{display:flex}.ft{padding-bottom:56px}}

/* ---------------------------------------------------- 모달 */
.modal{position:fixed;inset:0;z-index:300;background:rgba(25,31,40,.55);display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s}
.modal.on{opacity:1;pointer-events:auto}
.modal-box{position:relative;width:100%;max-width:440px;background:#fff;border-radius:28px;padding:32px 26px 24px;transform:translateY(30px) scale(.96);transition:transform .35s var(--spring)}
.modal.on .modal-box{transform:none}
.modal-x{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:18px;color:var(--gray)}
.modal-x:hover{background:var(--bg2)}
.modal h3{font-size:20px;font-weight:800;margin-bottom:18px}
.modal dl{display:grid;gap:4px;font-size:14.5px;margin-bottom:14px}
.modal dt{font-weight:800;color:var(--blue);margin-top:8px}
.modal dd{color:var(--ink2)}
.modal p{font-size:13px;color:var(--gray);margin-bottom:18px}

/* ---------------------------------------------------- 등장 애니메이션 */
.fade-up{opacity:0;animation:fadeUp .8s var(--ease) forwards;animation-delay:var(--d,0s)}
.drop-in{opacity:0;animation:dropIn .7s var(--spring) forwards}
.pop-in{opacity:0;animation:popIn .9s var(--spring) forwards;animation-delay:var(--d,0s)}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes dropIn{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.88) rotate(-2deg)}to{opacity:1;transform:none}}
.rv,.rv-l,.rv-r,.rv-z{opacity:0;transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.rv{transform:translateY(40px)}
.rv-l{transform:translateX(-60px)}
.rv-r{transform:translateX(60px)}
.rv-z{transform:scale(.86)}
.rv.go,.rv-l.go,.rv-r.go,.rv-z.go{opacity:1;transform:none}
.bento .rv-z.go{transition:opacity .8s var(--ease),transform .4s var(--spring),box-shadow .4s,border-color .4s;transition-delay:var(--d,0s),0s,0s,0s}

/* 비눗방울 · 반짝이 레이어 */
.fx-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bubble{position:absolute;bottom:-60px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.95) 0 8%,rgba(255,255,255,.15) 22%,rgba(150,200,255,.12) 60%,rgba(49,130,246,.25) 100%);
  border:1px solid rgba(255,255,255,.7);box-shadow:inset -4px -6px 12px rgba(49,130,246,.18);animation:rise linear forwards}
@keyframes rise{0%{transform:translate(0,0) scale(.6);opacity:0}10%{opacity:1}100%{transform:translate(var(--sw,0),-110vh) scale(1.1);opacity:.2}}
.fx-cf{position:fixed;width:9px;height:14px;border-radius:2px;z-index:400;pointer-events:none;animation:cf 1.3s var(--ease) forwards}
@keyframes cf{to{transform:translate(var(--tx),var(--ty)) rotate(var(--r));opacity:0}}
.fx-star{position:fixed;z-index:50;pointer-events:none;font-size:14px;color:var(--blue);animation:starfade .9s ease-out forwards;transform:translate(-50%,-50%)}
@keyframes starfade{to{opacity:0;transform:translate(-50%,-160%) scale(.4) rotate(90deg)}}
.zz *,.zz{animation-play-state:paused!important}

/* ---------------------------------------------------- 모바일 · 태블릿 스크롤 성능
   backdrop-filter·대형 blur·상시 장식 애니메이션은 모바일 GPU에서 스크롤 중 프레임 드랍을 일으킴 */
@media(max-width:1023px){
  .hd{background:rgba(255,255,255,.97);backdrop-filter:none;-webkit-backdrop-filter:none}
  .mbar{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
  .toast{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
  .hm-cap{background:rgba(255,255,255,.96);backdrop-filter:none;-webkit-backdrop-filter:none}
  .cv-nav{background:rgba(11,22,48,.5);backdrop-filter:none;-webkit-backdrop-filter:none}
  .flow li{background:rgba(255,255,255,.16);backdrop-filter:none;-webkit-backdrop-filter:none}
  .blob,.why-glow{display:none}
  .phone::before{animation:none}
  .bn .b3d,.who-badge img,.dday{animation:none}
  .team-bg{will-change:auto;inset:0;height:100%;transform:none!important}
}

/* ---------------------------------------------------- 모바일 가운데 정렬 · 가독성 */
@media(max-width:767px){
  .wrap{padding:0 22px}
  .sec{padding:80px 0}
  .sec h2,.hero-h,.team-ov h2,.save-txt h3{text-wrap:balance;word-break:keep-all}
  .sec h2{font-size:clamp(28px,7.6vw,34px);line-height:1.3}
  .sec-sub{font-size:16.5px;line-height:1.75;color:#4E5968;word-break:keep-all}
  .sec-hd{margin-bottom:40px}
  p,small,li{word-break:keep-all}

  /* 히어로 */
  .hero-txt{text-align:center}
  .hero-type{justify-content:center}
  .hero-cta{justify-content:center}
  .hs-ft{font-size:13px}

  /* 섹션 텍스트 블록 가운데 정렬 */
  .sec-hd.left,.course-txt,.order-txt,.who-txt,.apply-txt,.save-txt,.team-ov,.why-q,.sec .why-txt{text-align:center}
  .sec .why-txt{font-size:clamp(26px,7.4vw,32px);line-height:1.42;margin-inline:auto}
  .why-q{font-size:17px}
  .save-txt small{font-size:13px}

  /* 카드·리스트: 블록은 가운데, 행 내용은 왼쪽 정렬 유지 */
  .steps,.checks,.m-flow,.faq-list,.regions,.form{text-align:left}
  .steps small{font-size:14.5px;line-height:1.5}
  .steps b{font-size:17px}
  .checks small{font-size:15px}
  .m-flow small{font-size:14px;opacity:.78}
  .order-pts{width:max-content;max-width:100%;margin-inline:auto;text-align:left}
  .order-pts li{font-size:16.5px}
  .big365{justify-content:center}
  .big365 span{text-align:left}

  /* 혜택 카드 */
  .bn{text-align:center}
  .bn .b3d{margin-inline:auto}
  .bn-strike{justify-content:center}
  .bn p{font-size:16px;line-height:1.65}

  /* 지원 섹션 */
  .apply-txt>p{font-size:17px;line-height:1.7}
  .flow li{text-align:center;font-size:15.5px}
  .flow b{font-size:12.5px}

  /* 지역 · FAQ · 푸터 */
  .regions p{font-size:13.5px;line-height:1.55}
  .faq summary{font-size:16.5px;line-height:1.5}
  .faq details p{font-size:16px;line-height:1.75;padding:0 22px 22px}
  .team-ov{padding:64px 22px}
  .team-ov h2{font-size:clamp(30px,8.4vw,38px)}
  .team-ov p{font-size:17px}
  .ft{text-align:center;font-size:14px;line-height:1.7}
  .ft .brand{justify-content:center}
  .ft-disc{font-size:13px}
  .ft-copy{font-size:12.5px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv,.rv-l,.rv-r,.rv-z,.fade-up,.drop-in,.pop-in,.toast{opacity:1;transform:none}
  .hero-h .ln>span{transform:none}
}