/* ═══════════ 폰트 (Pretendard v1.3.9, /fonts) ═══════════ */
@font-face{font-family:'Pretendard';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/Pretendard-Regular.woff2') format('woff2')}
@font-face{font-family:'Pretendard';font-weight:600;font-style:normal;font-display:swap;src:url('/fonts/Pretendard-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Pretendard';font-weight:700;font-style:normal;font-display:swap;src:url('/fonts/Pretendard-Bold.woff2') format('woff2')}
@font-face{font-family:'Pretendard';font-weight:800;font-style:normal;font-display:swap;src:url('/fonts/Pretendard-ExtraBold.woff2') format('woff2')}

:root{
  --bg:#070b14;
  --bg2:#0a0f1b;
  --card:#0e1320;
  --card2:#141a28;
  --line:rgba(255,255,255,.07);
  --line2:rgba(255,255,255,.12);
  --tx:#e8ecf4;
  --tx2:#8b94a8;
  --tx3:#5a6377;
  --blue:#3b82f6;
  --blue2:#60a5fa;
  --green:#34d399;
  --kakao:#FEE500;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--tx);
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.6;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1500px;margin:0 auto;padding:0 24px}

/* ═══════════ 헤더 ═══════════ */
.hd{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-bottom:1px solid #e5e8ee;
}
.hd-in{
  max-width:1248px;margin:0 auto;padding:0 24px;height:62px; /* 콘텐츠 폭 1200px (푸터와 동일) */
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.logo{display:flex;align-items:flex-end;gap:12px;min-width:0} /* 두 로고 아랫선 맞춤 */
.logo img{display:block;height:30px;width:auto}
.logo img.logo-ai{height:35px} /* AI마케팅공작소 로고만 조금 크게 */
.logo .x{align-self:center;font-size:20px;line-height:1;color:#9aa1ad;font-weight:300}
.hd-tel{
  display:inline-flex;align-items:center;gap:7px;flex:none;white-space:nowrap;
  font-size:14px;font-weight:700;color:var(--tx);
  border:1px solid var(--line2);border-radius:999px;padding:8px 16px;
  transition:border-color .25s,background .25s;
}
.hd-tel:hover{border-color:var(--blue);background:rgba(59,130,246,.1)}
.hd .hd-tel{color:#0b1220;border-color:#d5dae3}
.hd .hd-tel:hover{border-color:var(--blue);background:rgba(59,130,246,.08);color:#1d4ed8}

/* ═══════════ 히어로 ═══════════ */
/* 헤더(62px) + 히어로 = 첫 화면 가득. 문구는 세로 가운데 */
.hero{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  min-height:calc(100vh - 62px);min-height:calc(100svh - 62px);
  padding:100px 24px;text-align:center;
}
/* 글로우 위치는 히어로 세로 가운데(=문구 가운데) 기준 → 화면 높이가 달라도 문구를 따라감 */
.hero::before{
  content:'';position:absolute;left:50%;top:calc(50% - 541px);transform:translateX(-50%);
  width:1100px;height:620px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(59,130,246,.22),transparent 72%);
}
.hero::after{
  content:'';position:absolute;left:50%;top:calc(50% - 261px);transform:translateX(-50%);
  width:720px;height:420px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(52,211,153,.12),transparent 70%);
}
/* 배경 점·선 네트워크 캔버스 (빛 번짐 위, 텍스트 아래) */
.hero-net{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero-in{position:relative;width:100%;max-width:900px;margin:0 auto}
.eyebrow{
  display:inline-block;font-size:11px;letter-spacing:.2em;font-weight:700;
  color:var(--blue2);background:rgba(59,130,246,.1);
  border:1px solid rgba(59,130,246,.32);border-radius:999px;padding:8px 18px;
}
.hero h1{
  margin-top:26px;font-size:52px;font-weight:800;line-height:1.3;letter-spacing:-.03em;
}
.hero h1 em{
  display:block;font-style:normal;font-size:30px;font-weight:700;
  color:#c3cad8;letter-spacing:-.02em;margin-bottom:6px;
}
.hero h1 b{
  background:linear-gradient(100deg,#fff 10%,var(--blue2) 55%,var(--green) 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;
}
.hero p{
  margin-top:24px;font-size:20px;line-height:1.75;color:#c3cad8;
}
.hero-tags{
  margin-top:34px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
.hero-tags span{
  font-size:13px;font-weight:600;color:var(--tx2);
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;
  background:rgba(255,255,255,.02);
}
.hero-tags span b{color:var(--green);font-weight:700}
.hero-cta{margin-top:56px;display:flex;justify-content:center}
.hero-cta .btn{box-shadow:0 8px 28px rgba(254,229,0,.18)}
.hero-cta .arr{transition:transform .25s}
.hero-cta .btn:hover .arr{transform:translateX(4px)}

/* 히어로 등장 */
.fade{opacity:0;transform:translateY(16px);transition:opacity .8s,transform .8s}
.fade.in{opacity:1;transform:none}
/* 버튼은 .btn 의 transition 이 .fade 를 덮어쓰므로 등장용 전환을 함께 지정 */
.btn.fade{transition:opacity .8s,transform .8s,box-shadow .25s,background .25s}

/* ═══════════ 섹션 공통 ═══════════ */
.sec{padding:92px 0}
.sec.alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* 모션 섹션: 모션 1개 = 섹션 1개. 콘텐츠 폭(최대 1200px) 안에 카드처럼 배치, 높이는 모듈이 section 모드에서 자체 지정 */
.motion-sec{padding:110px 0}
.motion-sec+.motion-sec{border-top:1px solid var(--line)}
.motion-wrap{max-width:1248px}
.motion{position:relative;overflow:hidden;border-radius:26px;border:1px solid var(--line);isolation:isolate}
.sec-head{text-align:center;margin-bottom:52px}
.sec-head.is-left{text-align:left;margin-bottom:72px}
.cta-sec{padding:180px 0}
.sec-head .eyebrow{margin-bottom:20px}
.sec-head h2{font-size:34px;font-weight:800;line-height:1.4;letter-spacing:-.02em}
.sec-head h2 b{color:var(--blue2)}
/* 모바일 전용 줄바꿈 */
.m-br{display:none}
.sec-head h2 .ln{display:block}
.sec-head h2 .ln+.ln{margin-top:28px} /* 문단 사이 여백 */
/* 제목 강조 애니메이션: 파랑→녹색 밑줄이 왼쪽부터 그어짐 (화면에 들어오면 JS가 .on 을 차례로 부여, 1회). 글자색은 그대로
   (배경 이미지 방식이라 모바일에서 단어가 두 줄로 꺾여도 줄마다 밑줄이 이어짐) */
.sec-head h2 .hl{
  background:linear-gradient(90deg,var(--blue),var(--green)) no-repeat 0 100%/0% 4px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:3px;
  transition:background-size .8s cubic-bezier(.65,0,.35,1);
}
.sec-head h2 .hl.on{background-size:100% 4px}
.sec-head p{margin-top:14px;font-size:15px;color:var(--tx2)}
.sec-head p b{color:var(--blue2);font-weight:700}

/* ═══════════ 카드 4종 ═══════════ */
.grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  zoom:.92;max-width:1500px;margin:0 auto;
}
.card{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:26px;padding:22px 22px 24px;min-height:650px;
  display:flex;flex-direction:column;overflow:hidden;transition:border-color .4s;
  line-height:normal; /* body의 line-height:1.6 이 카드 내부까지 늘리지 않도록 */
}
.card::after{
  content:'';position:absolute;inset:0;border-radius:26px;pointer-events:none;
  background:radial-gradient(420px 220px at 50% -10%,rgba(59,130,246,.12),transparent 70%);
  opacity:0;transition:opacity .7s;
}
.card.play::after{opacity:1}
.card.play{border-color:var(--line2)}
.pill{
  align-self:flex-start;font-size:13px;font-weight:700;color:#fff;
  background:var(--blue);border-radius:999px;padding:7px 15px;margin-bottom:18px;
}
.pill.g{background:var(--green);color:#05291d}
.stage{flex:1;display:flex;align-items:center;justify-content:center}
.foot{margin-top:20px}
.foot h3{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:11px}
.foot p{font-size:14px;line-height:1.65;color:var(--tx2)}
.demo{
  position:absolute;top:23px;right:20px;font-size:11px;letter-spacing:.06em;
  color:var(--tx3);border:1px solid var(--line);border-radius:5px;padding:3px 7px;
}

/* 주간 리포트 */
.mini{width:100%;background:var(--card2);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.mini-top{background:linear-gradient(135deg,#1d4ed8,#3b82f6);padding:16px 16px}
.mini-top .lb{font-size:9.5px;letter-spacing:.14em;font-weight:700;color:rgba(255,255,255,.75)}
.mini-top .ti{font-size:15px;font-weight:800;margin-top:6px}
.mini-body{padding:14px 13px 15px}
.sect{font-size:11px;font-weight:700;color:var(--tx3);letter-spacing:.04em;margin-bottom:9px}
.sect.ac{display:flex;align-items:center;justify-content:space-between}
.sect.ac span{font-size:9px;color:var(--tx3)}
.kpi{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kpi>div{
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:10px 9px;text-align:center;
  opacity:0;transform:translateY(14px);transition:opacity .5s,transform .6s cubic-bezier(.22,1,.36,1);
}
.kpi>div.show{opacity:1;transform:translateY(0)}
.kpi .k{font-size:10px;color:var(--tx3)}
.kpi .v{font-size:18px;font-weight:800;margin:5px 0 3px;letter-spacing:-.02em}
.kpi .s{font-size:10px;color:var(--tx3)}
.kpi .ok{color:var(--green)}
.hr{height:1px;background:var(--line);margin:14px 0 12px}
.insp-i{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 2px;border-bottom:1px solid var(--line);font-size:13px;
  opacity:0;transform:translateY(5px);transition:all .45s;
}
.insp-i:last-child{border-bottom:0}
.insp-i.show{opacity:1;transform:translateY(0)}
.insp-i .nm{color:var(--tx2)}
.insp-i .ok{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--green)}
.insp-i .ok i{position:relative;display:block;width:14px;height:14px;border-radius:50%;background:var(--green)}
.insp-i .ok i::after{
  content:'';position:absolute;left:5px;top:2px;width:3.4px;height:6.8px;
  border:solid #06261b;border-width:0 2px 2px 0;transform:rotate(45deg);
}

/* 경쟁 분석 */
.bars{width:100%;display:flex;flex-direction:column;gap:17px}
.bar-row .bt{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.bar-row .nm{font-size:14px;font-weight:600;color:var(--tx)}
.bar-row .ct{font-size:13px;font-weight:700;color:var(--tx2)}
.bar-row .ct b{font-size:16.5px;color:#fff}
.track{height:7px;border-radius:999px;background:rgba(255,255,255,.05);overflow:hidden}
.fill{
  height:100%;border-radius:999px;width:0;
  background:linear-gradient(90deg,#2563eb,#60a5fa);
  transition:width 1.1s cubic-bezier(.22,1,.36,1);
}
.bar-row.low .fill{background:linear-gradient(90deg,#059669,#34d399)}
.bar-row.low .ct b{color:var(--green)}

/* 지역 추천 */
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;width:100%}
.chip{
  position:relative;height:42px;border-radius:999px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--tx3);background:rgba(255,255,255,.02);
  transition:all .5s cubic-bezier(.22,1,.36,1);
}
.chip.on{
  color:#fff;font-weight:700;border-color:var(--green);
  background:rgba(52,211,153,.14);box-shadow:0 0 0 4px rgba(52,211,153,.07);
  transform:translateY(-2px);
}
.chip .dot{
  position:absolute;top:-6px;right:-4px;height:18px;padding:0 7px;border-radius:999px;
  background:var(--green);color:#05291d;font-size:10px;font-weight:800;line-height:18px;
  opacity:0;transform:scale(.4);transition:all .4s cubic-bezier(.34,1.56,.64,1);
}
.chip.on .dot{opacity:1;transform:scale(1)}

.cap{
  margin-top:19px;font-size:12px;color:var(--tx3);display:flex;align-items:center;gap:7px;
  opacity:0;transition:opacity .5s 2.2s;
}
.play .cap{opacity:1}
.play.rs .cap{opacity:0;transition-delay:0s} /* 리플레이 초기화 중에는 캡션 즉시 숨김 */
.cap i{width:6px;height:6px;border-radius:50%;background:var(--blue);display:block}
.cap.g i{background:var(--green)}

/* 전국 지도 */
.map{position:relative;width:100%;aspect-ratio:200/169}
.map svg{position:absolute;inset:0;width:100%;height:100%}
/* 서울 도트 지도 (Seeds 모션과 같은 육각 격자). 핀이 나타나면 주변 도트 그룹(.dl)이 녹색으로 점등 */
.map .dots{fill:#233046}
.map .dl{transition:fill .9s ease-out}
.map .dl.on{fill:rgba(52,211,153,.55)}
.map .dl.home.on{fill:rgba(52,211,153,.85)}
.spot{
  position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--blue2);opacity:0;transform:scale(.2);
  transition:opacity .5s,transform .5s cubic-bezier(.34,1.56,.64,1);
}
.spot.show{opacity:1;transform:scale(1)}
/* 핀 원: 기본 원을 크게(inset -6px) 잡고 덜 확대 → 퍼지는 크기는 같고 선 굵기는 얇게 */
.spot::before,.spot::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1.5px solid rgba(96,165,250,.7);opacity:0;pointer-events:none;
}
.play .spot.show{animation:glow 3s var(--d) ease-in-out infinite}
/* 일반 핀: 나타날 때 원이 한 번만 퍼짐 (우리 매장은 아래 .home 규칙으로 계속 반복) */
.play .spot.show::before{animation:ripple 1.8s ease-out 1 both}
@keyframes glow{
  0%,100%{box-shadow:0 0 5px rgba(96,165,250,.45)}
  50%{box-shadow:0 0 15px rgba(96,165,250,.95)}
}
@keyframes ripple{
  0%{transform:scale(.3);opacity:.8}
  100%{transform:scale(3.4);opacity:0}
}
.spot.home{width:15px;height:15px;margin:-7.5px 0 0 -7.5px;background:var(--green)}
/* 우리 매장 원: 기본 원을 크게(inset -12px) 잡고 덜 확대 → 퍼지는 크기는 같고 선 굵기는 약 절반 */
.spot.home::before,.spot.home::after{inset:-12px;border-color:rgba(52,211,153,.6)}
.play .spot.home.show{animation:glowHome 3.4s 0s ease-in-out infinite}
.play .spot.home.show::before{animation:rippleBig 3.4s .1s ease-out infinite}
.play .spot.home.show::after{animation:rippleBig 3.4s 1.7s ease-out infinite}
@keyframes glowHome{
  0%,100%{box-shadow:0 0 8px rgba(52,211,153,.55)}
  50%{box-shadow:0 0 22px rgba(52,211,153,1)}
}
@keyframes rippleBig{
  0%{transform:scale(.2);opacity:.9}
  100%{transform:scale(5.36);opacity:0}
}
.home-tag{
  position:absolute;transform:translate(-50%,5px);white-space:nowrap;
  font-size:11px;font-weight:700;color:#fff;
  background:var(--card2);border:1px solid var(--line2);
  border-radius:7px;padding:5px 10px;
  opacity:0;transition:all .5s;
}
.home-tag.show{opacity:1;transform:translate(-50%,0)}

.note{
  font-size:15px;line-height:1.85;color:var(--tx2);
  text-align:center;max-width:780px;margin:44px auto 0;
}

/* ═══════════ 미래비즈온으로 갈아타야 하는 이유 ═══════════ */
.why-wrap{max-width:1248px}
.why-head{margin-bottom:48px}
.why-head p{font-size:16px}
.why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.why-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;word-break:keep-all;
  background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px 18px 28px;
  opacity:0;transform:translateY(16px);
  /* 등장(opacity·transform)에만 순차 지연(--sd), 호버(테두리·그림자·translate)는 지연 없이 즉시 */
  transition:opacity .7s var(--sd,0s),transform .7s var(--sd,0s),border-color .2s,box-shadow .2s,translate .2s;
}
.why-card:hover{
  border-color:var(--blue2);translate:0 -4px;
  box-shadow:0 0 0 1px rgba(96,165,250,.35),0 10px 30px rgba(59,130,246,.25);
}
.why-sec.play .why-card{opacity:1;transform:none}
.why-card:nth-child(2){--sd:.1s}
.why-card:nth-child(3){--sd:.2s}
.why-card:nth-child(4){--sd:.3s}
.why-card:nth-child(5){--sd:.4s}
.why-ico{width:120px;height:100px;margin-bottom:14px;overflow:visible}
.why-ico *{transform-box:fill-box}
.why-key{font-size:22px;font-weight:800;color:var(--blue2);letter-spacing:-.02em}
.why-ti{display:block;margin-top:12px;font-size:17px;font-weight:800;color:var(--tx)}
.why-de{margin-top:10px;font-size:14px;line-height:1.65;color:var(--tx2)}

/* 공통 아이콘 색 */
.why-ico .body{fill:#1e3a8a}
.why-ico .band{fill:#3b82f6}
.why-ico .ring{fill:#93c5fd}

/* ① 14년: 왕관이 까딱이고 반짝이 깜빡임 */
.ico-cal14 .rib{fill:#2563eb}
.ico-cal14 text{fill:#fff;font-size:26px;font-weight:800;font-family:inherit}
.ico-cal14 .crown{fill:#fbbf24;transform-origin:50% 100%}
.ico-cal14 .spk{fill:#fde68a;opacity:.3}
.why-sec.play .ico-cal14 .crown{animation:crownBob 2.4s ease-in-out infinite}
.why-sec.play .ico-cal14 .spk{animation:twinkle 1.8s ease-in-out infinite}
.why-sec.play .ico-cal14 .s2{animation-delay:.6s}
.why-sec.play .ico-cal14 .s3{animation-delay:1.2s}
@keyframes crownBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-6deg)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.3)}}

/* ② 매주: 체크가 차례로 켜지고 동기화 아이콘 회전 */
.ico-weekly .ck{fill:rgba(147,197,253,.25);transition:fill .3s}
.why-sec.play .ico-weekly .ck{fill:#60a5fa}
.why-sec.play .ico-weekly .c1{transition-delay:.4s}
.why-sec.play .ico-weekly .c2{transition-delay:.6s}
.why-sec.play .ico-weekly .c3{transition-delay:.8s}
.why-sec.play .ico-weekly .c4{transition-delay:1s}
.why-sec.play .ico-weekly .c5{transition-delay:1.2s}
.ico-weekly .sync-bg{fill:#2563eb}
.ico-weekly .sync{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transform-origin:center}
.why-sec.play .ico-weekly .sync{animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ③ 오전 6시: 해 광선 회전, 시계가 주기적으로 울림(흔들림), 분침 회전 */
.ico-clock .sun circle{fill:#fbbf24}
.ico-clock .rays{stroke:#fbbf24;stroke-width:3;stroke-linecap:round;transform-origin:center}
.ico-clock .bell{fill:#3b82f6}
.ico-clock .rim{fill:#1e3a8a;stroke:#3b82f6;stroke-width:4}
.ico-clock .face{fill:#eff6ff}
.ico-clock .hand{stroke:#1e3a8a;stroke-width:3.2;stroke-linecap:round}
.ico-clock .hand.m{stroke:#2563eb;transform-origin:0 0}
.ico-clock .pin{fill:#1e3a8a}
.ico-clock .clock{transform-origin:50% 60%}
.ico-clock .cloud{fill:#cbd5e1;opacity:.85}
.why-sec.play .ico-clock .rays{animation:spin 10s linear infinite}
.why-sec.play .ico-clock .clock{animation:ring 3s ease-in-out infinite}
.why-sec.play .ico-clock .hand.m{animation:spin 6s linear infinite}
@keyframes ring{
  0%,70%,100%{transform:rotate(0)}
  74%{transform:rotate(-8deg)}78%{transform:rotate(8deg)}82%{transform:rotate(-6deg)}86%{transform:rotate(6deg)}90%{transform:rotate(0)}
}

/* ④ 빅데이터: 막대가 자라고 추세선이 그어짐 */
.ico-chart .card-bg{fill:rgba(147,197,253,.25)}
.ico-chart .bar{fill:#3b82f6;transform-origin:50% 100%;transform:scaleY(0);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.ico-chart .b4{fill:#60a5fa}
.why-sec.play .ico-chart .bar{transform:scaleY(1)}
.why-sec.play .ico-chart .b2{transition-delay:.12s}
.why-sec.play .ico-chart .b3{transition-delay:.24s}
.why-sec.play .ico-chart .b4{transition-delay:.36s}
.ico-chart .trend{fill:none;stroke:#93c5fd;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1s .6s ease-out}
.why-sec.play .ico-chart .trend{stroke-dashoffset:0}
.ico-chart .dot{fill:#fff;opacity:0;transition:opacity .3s}
.why-sec.play .ico-chart .dot{opacity:1}
.why-sec.play .ico-chart .d1{transition-delay:.8s}
.why-sec.play .ico-chart .d2{transition-delay:1s}
.why-sec.play .ico-chart .d3{transition-delay:1.2s}
.why-sec.play .ico-chart .d4{transition-delay:1.4s}

/* ⑤ 직접: 화살표가 오가고 연결 불꽃 깜빡 */
.ico-direct .person{fill:#3b82f6}
.ico-direct .p2{fill:#60a5fa}
.ico-direct .arrow{fill:none;stroke:#93c5fd;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.ico-direct .spark{fill:none;stroke:#fbbf24;stroke-width:2.6;stroke-linecap:round;opacity:.3}
.why-sec.play .ico-direct .arrow{animation:nudge 1.6s ease-in-out infinite}
.why-sec.play .ico-direct .spark{animation:blink 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(-3px)}50%{transform:translateX(4px)}}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}

/* 실적 바 */
.why-stats{
  margin-top:20px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;
  background:linear-gradient(135deg,#1d4ed8,#2563eb 55%,#3b82f6);border-radius:22px;padding:36px 24px;
  box-shadow:0 14px 40px rgba(37,99,235,.25);
}
.why-stats>div{text-align:center;display:flex;flex-direction:column;gap:8px}
.why-stats strong{font-size:34px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.2}
.why-stats>div>span{font-size:15px;font-weight:700;color:rgba(255,255,255,.88)}

/* ═══════════ 미래비즈ON만의 혜택 4가지 ═══════════ */
.bn-wrap{max-width:1248px}
.bn-head{margin-bottom:48px}
.bn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bn-card{
  display:flex;flex-direction:column;text-align:left;word-break:keep-all;
  background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px 18px 26px;
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--sd,0s),transform .7s var(--sd,0s),border-color .2s,box-shadow .2s,translate .2s;
}
.bn-card:nth-child(2){--sd:.12s}
.bn-card:nth-child(3){--sd:.24s}
.bn-card:nth-child(4){--sd:.36s}
.bn-sec.play .bn-card{opacity:1;transform:none}
.bn-card:hover{
  border-color:var(--blue2);translate:0 -4px;
  box-shadow:0 0 0 1px rgba(96,165,250,.35),0 10px 30px rgba(59,130,246,.25);
}
.bn-art{
  border-radius:16px;margin-bottom:22px;aspect-ratio:240/150;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 0%,rgba(59,130,246,.16),transparent 70%),var(--card2);
  border:1px solid var(--line);overflow:hidden;
}
.bn-ill{width:100%;height:100%;overflow:visible}
.bn-ill *{transform-box:fill-box}
/* 혜택 번호 배지: 파랑→녹색 그라데이션 + 빛 */
.bn-no{
  align-self:flex-start;font-size:13px;font-weight:800;letter-spacing:.02em;color:#fff;
  background:linear-gradient(135deg,#2563eb,#3b82f6 45%,#10b981);border-radius:999px;padding:6px 14px;
  box-shadow:0 0 0 1px rgba(147,197,253,.35),0 6px 20px rgba(59,130,246,.35);
}
.bn-ti{display:block;margin-top:14px;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--tx);overflow-wrap:anywhere}
.bn-de{margin-top:10px;font-size:14px;line-height:1.7;color:var(--tx2)}

/* 혜택 마무리 문구 + CTA */
.bn-close{margin-top:120px;text-align:center;word-break:keep-all}
.bn-msg{font-size:38px;font-weight:800;line-height:1.4;letter-spacing:-.03em;color:var(--tx)}
.bn-brand{margin-top:6px;font-size:38px;font-weight:800;line-height:1.4;letter-spacing:-.03em;color:var(--tx)}
.bn-brand b{color:var(--blue2);font-weight:800}
.bn-cta{
  margin-top:64px;padding:22px 48px;font-size:20px;font-weight:800;gap:12px;
  box-shadow:0 10px 34px rgba(254,229,0,.25);
}
.bn-cta:hover{box-shadow:0 12px 40px rgba(254,229,0,.4)}
.bn-cta .arr{transition:transform .25s}
.bn-cta:hover .arr{transform:translateX(5px)}

/* 혜택1 우동AI: 창문이 무작위로 켜지고, AI 핀이 통통 튀고, 연결선이 매장으로 흐름 */
.ill-udong .ground{fill:rgba(147,197,253,.3)}
.ill-udong .bld{fill:#1e3a8a}
.ill-udong .b2{fill:#1d4ed8}
.ill-udong .win{fill:rgba(147,197,253,.18)}
.bn-sec.play .ill-udong .win{animation:winOn 3.2s var(--wd) ease-in-out infinite}
@keyframes winOn{0%,100%{fill:rgba(147,197,253,.18)}35%,60%{fill:#fde68a}}
.ill-udong .link{fill:none;stroke:#34d399;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:3 6}
.bn-sec.play .ill-udong .link{animation:flow 1.2s linear infinite}
@keyframes flow{to{stroke-dashoffset:-18}}
.ill-udong .shop-body{fill:#0f766e}
.ill-udong .awning{fill:#34d399}
.ill-udong .door{fill:#a7f3d0}
.ill-udong .pin path{fill:#3b82f6}
.ill-udong .pin text{fill:#fff;font-size:10px;font-weight:800;font-family:inherit}
.bn-sec.play .ill-udong .pin{animation:pinBob 1.8s ease-in-out infinite}
@keyframes pinBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* 혜택2 주간 리포트: 줄이 채워지고 막대가 자라며, 돋보기가 훑고, 체크가 맥동 */
.ill-report .doc{fill:#eff6ff}
.ill-report .doc-hd{fill:#2563eb}
.ill-report .ln{fill:#bfdbfe;transform-origin:0 50%;transform:scaleX(0);transition:transform .6s ease-out}
.bn-sec.play .ill-report .ln{transform:scaleX(1)}
.bn-sec.play .ill-report .l2{transition-delay:.15s}
.bn-sec.play .ill-report .l3{transition-delay:.3s}
.ill-report .bar{fill:#3b82f6;transform-origin:50% 100%;transform:scaleY(0);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.ill-report .b4{fill:#34d399}
.bn-sec.play .ill-report .bar{transform:scaleY(1)}
.bn-sec.play .ill-report .b1{transition-delay:.4s}
.bn-sec.play .ill-report .b2{transition-delay:.52s}
.bn-sec.play .ill-report .b3{transition-delay:.64s}
.bn-sec.play .ill-report .b4{transition-delay:.76s}
.ill-report .mag circle{fill:rgba(255,255,255,.25);stroke:#1e3a8a;stroke-width:3.5}
.ill-report .mag path{stroke:#1e3a8a;stroke-width:5;stroke-linecap:round}
.bn-sec.play .ill-report .mag{animation:scan 4s ease-in-out infinite}
@keyframes scan{0%,100%{transform:translate(0,0)}35%{transform:translate(40px,4px)}70%{transform:translate(14px,34px)}}
.ill-report .ok{fill:#10b981}
.ill-report .ok-ring{fill:none;stroke:#34d399;stroke-width:2;opacity:0;transform-origin:center}
.ill-report .ok-ck{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.bn-sec.play .ill-report .ok-ring{animation:okPulse 2s ease-out infinite}
@keyframes okPulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.9);opacity:0}}

/* 혜택3 관리 시스템: 레이더 빔이 회전하며 지나가는 곳의 점이 켜짐 (사각지대 없음) */
.ill-radar .rg{fill:none;stroke:rgba(147,197,253,.28);stroke-width:1.4}
.ill-radar .cross{stroke:rgba(147,197,253,.16);stroke-width:1}
.ill-radar .sweep{transform-box:view-box;transform-origin:120px 72px}
.bn-sec.play .ill-radar .sweep{animation:spin 3s linear infinite}
.ill-radar .blip{fill:#34d399;opacity:.2;transform-origin:center}
.bn-sec.play .ill-radar .blip{animation:blip 3s var(--bd) ease-out infinite}
@keyframes blip{0%{opacity:1;transform:scale(1.5)}40%,100%{opacity:.2;transform:scale(1)}}
.ill-radar .core{fill:#60a5fa}

/* 혜택4 한생총: 보호막 파동 + 방패 체크가 그려지고 사람들이 살짝 움직임 */
.ill-shield .wave{fill:none;stroke:rgba(96,165,250,.6);stroke-width:2;opacity:0;transform-origin:center}
.bn-sec.play .ill-shield .wave{animation:shieldWave 3s ease-out infinite}
.bn-sec.play .ill-shield .w2{animation-delay:1.5s}
@keyframes shieldWave{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.ill-shield .ppl{fill:#3b82f6}
.ill-shield .p2{fill:#60a5fa}
.bn-sec.play .ill-shield .ppl{animation:pinBob 2.4s ease-in-out infinite}
.bn-sec.play .ill-shield .p2{animation-delay:1.2s}
.ill-shield .shield{fill:#1d4ed8;stroke:#93c5fd;stroke-width:3;stroke-linejoin:round}
.ill-shield .shield-ck{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .8s .4s ease-out}
.bn-sec.play .ill-shield .shield-ck{stroke-dashoffset:0}
.ill-shield .spark{fill:#fbbf24;opacity:.3;transform-origin:center}
.bn-sec.play .ill-shield .spark{animation:twinkle 1.8s ease-in-out infinite}
.bn-sec.play .ill-shield .s2{animation-delay:.9s}

/* ═══════════ 리포트 수신 안내 ═══════════ */
.recv{
  max-width:920px;margin:0 auto;
  background:var(--card);border:1px solid var(--line);border-radius:24px;
  padding:44px 40px;text-align:center;
}
.recv{word-break:keep-all;overflow-wrap:break-word} /* 한글이 단어 중간에서 끊기지 않게 */
.recv h3{font-size:34px;font-weight:800;line-height:1.4;letter-spacing:-.02em;text-wrap:balance}
.recv h3 .c-report{color:var(--blue2)}
.recv h3 .c-kakao{color:var(--kakao)}
.recv .lead{margin-top:14px;font-size:15px;line-height:1.85;color:var(--tx2)}
/* 수신 조건 카드: 다크 카드(--card2 #141a28) + 상단 이미지 + 제목·설명 + 하단 버튼
   이미지 배경색도 #141a28 로 맞춰야 카드와 한 장처럼 이어짐 */
.cond{
  margin:34px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:840px;
}
.cond>div{
  display:flex;flex-direction:column;text-align:left;
  background:var(--card2);border:1px solid var(--line);border-radius:24px;padding:28px 28px 30px;
}
.cond .pic{
  height:280px;display:flex;align-items:center;justify-content:center;
  border-radius:16px;background:var(--card2);
}
/* AI 이미지 배경은 단색이 아니라 가장자리 경계가 보임 → 바깥 8%만 카드 배경으로 페이드 */
.cond img{
  display:block;height:100%;aspect-ratio:1/1;object-fit:contain;
  -webkit-mask-image:
    linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),
    linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),
    linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
  mask-composite:intersect;
}
.cond .tag{
  align-self:flex-start;margin-top:26px;font-size:12px;font-weight:700;
  color:var(--blue2);background:rgba(59,130,246,.14);border-radius:999px;padding:4px 11px;
}
.cond b{display:block;margin-top:10px;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--tx)}
.cond em{display:block;flex:1;font-style:normal;font-size:15px;line-height:1.7;color:var(--tx2);margin-top:10px}
.cond .go{
  margin-top:26px;display:flex;align-items:center;justify-content:center;height:52px;
  border-radius:999px;background:rgba(59,130,246,.14);border:1px solid rgba(59,130,246,.32);
  color:var(--blue2);font-size:16px;font-weight:700;
  transition:background .25s,color .25s,border-color .25s;
}
.cond .go:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.recv .tail{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  font-size:15px;line-height:1.85;color:var(--tx2);
}
.recv .tail-sub{margin-top:12px;font-size:14px;line-height:1.8;color:var(--tx2)}
.recv .tail-sub b{color:var(--tx);font-weight:700}

/* ═══════════ 문의 ═══════════ */
.cta{text-align:center}
.cta h2{font-size:34px;font-weight:800;letter-spacing:-.02em}
.cta h2{line-height:1.45;word-break:keep-all}
.cta p{margin-top:14px;font-size:15px;color:var(--tx2)}
.cta .cta-q{margin-top:28px;font-size:34px;font-weight:700;line-height:1.45;letter-spacing:-.02em;color:var(--tx);word-break:keep-all}
.cta .cta-lead{margin-top:28px;font-size:34px;font-weight:800;line-height:1.45;letter-spacing:-.02em;color:var(--tx);word-break:keep-all}
.cta .cta-lead b{color:var(--blue2);font-weight:800}

/* 메인 브랜딩 문구 — 흐르는 그라데이션 글자 + 회전하는 그라데이션 테두리 + 'ON' 점등(글로우 펄스) */
@property --bd-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.brand-wrap{
  position:relative;display:inline-block;margin-top:40px;padding:22px 44px;border-radius:999px;
  background:rgba(14,19,32,.85);
  box-shadow:0 0 40px rgba(59,130,246,.18),0 0 80px rgba(52,211,153,.10);
}
.brand-wrap::before{ /* 그라데이션 테두리 (지원 브라우저에서 회전) */
  content:'';position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--bd-angle),var(--blue),var(--green),#fff,var(--blue2),var(--blue));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:bdSpin 4s linear infinite;
}
@keyframes bdSpin{to{--bd-angle:360deg}}
.brand-line{
  margin:0!important;font-size:40px!important;font-weight:800;letter-spacing:-.03em;line-height:1.3;word-break:keep-all;
  background:linear-gradient(100deg,#fff 0%,var(--blue2) 25%,var(--green) 45%,#fff 50%,var(--green) 55%,var(--blue2) 75%,#fff 100%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
  animation:brandShine 4s linear infinite;
}
@keyframes brandShine{to{background-position:-200% center}}
.brand-line .on{ /* 'ON' — 전원이 켜지듯 녹색으로 빛남
  (inline-block + filter 로 별도 레이어를 만들었을 때 등장 애니메이션 중 'ON'이 '미' 위에 겹쳐 보이는 현상 — 크롬 렌더링 문제로 추정
   → 레이어 없이 글자색 + text-shadow 로 처리) */
  color:#6ee7b7;-webkit-text-fill-color:#6ee7b7;
  animation:onGlow 2.4s ease-in-out infinite;
}
@keyframes onGlow{
  0%,100%{text-shadow:0 0 4px rgba(52,211,153,.45)}
  50%{text-shadow:0 0 16px rgba(52,211,153,1),0 0 28px rgba(52,211,153,.5)}
}

.cta-btns{margin-top:72px;display:flex;flex-wrap:wrap;gap:13px;justify-content:center}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  border-radius:999px;padding:16px 30px;font-size:16px;font-weight:700;
  transition:transform .2s,box-shadow .25s,background .25s;
}
.btn:active{transform:translateY(1px)}
.btn-tel{background:#fff;color:#0b1220;box-shadow:0 6px 24px rgba(255,255,255,.12)}
.btn-tel:hover{box-shadow:0 8px 30px rgba(255,255,255,.2)}
.btn-tel .num{font-size:19px;letter-spacing:-.01em}
.btn-kakao{background:var(--kakao);color:#3C1E1E}
.btn-kakao:hover{background:#ffec3d}
.btn-site{background:var(--blue);color:#fff;box-shadow:0 6px 24px rgba(59,130,246,.25)}
.btn-site:hover{background:#2563eb;box-shadow:0 8px 30px rgba(59,130,246,.35)}

/* ═══════════ 푸터 ═══════════ */
.ft{border-top:1px solid #e5e8ee;padding:24px 0 26px;background:#fff}
.ft-in{max-width:1248px;margin:0 auto;padding:0 24px;text-align:left} /* 콘텐츠 폭 1200px */
.ft-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 32px;font-size:13px;color:#6b7280;line-height:1.7}
.ft-row+.ft-row{margin-top:2px}
/* 푸터 로고 */
.ft-logo{display:inline-flex;align-items:flex-end;gap:9px;margin-bottom:20px} /* 두 로고 아랫선 맞춤 */
.ft-logo img{display:block;height:22px;width:auto}
.ft-logo img.logo-ai{height:26px} /* AI마케팅공작소 로고만 조금 크게 */
.ft-logo .x{align-self:center;font-size:13px;color:#aab0bc;font-weight:300}
.ft-row b{color:#374151;font-weight:600;margin-right:7px}
.ft-copy{margin-top:20px;padding-top:16px;border-top:1px solid #e5e8ee;font-size:12px;color:#9ca3af}

/* ═══════════ 반응형 ═══════════ */
@media(max-width:1100px){
  .why-grid{grid-template-columns:repeat(3,1fr)}
  .bn-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .bn-grid{grid-template-columns:1fr}
  .bn-close{margin-top:80px}
  .bn-msg{font-size:24px}
  .bn-brand{font-size:24px}
  .bn-cta{margin-top:44px;padding:18px 28px;font-size:17px}
}
@media(max-width:1280px){
  .grid{grid-template-columns:repeat(2,1fr);zoom:1}
}
@media(max-width:820px){
  .logo{gap:8px}
  .logo img{height:22px}
  .logo img.logo-ai{height:26px}
  .logo .x{font-size:15px}
  .hd .hd-tel{font-size:13px;padding:7px 12px;gap:5px}
  .hero{padding:72px 20px}
  .hero::before{top:calc(50% - 482px)}
  .hero::after{top:calc(50% - 202px)}
  .hero h1{font-size:34px}
  .hero h1 em{font-size:21px}
  .hero p{font-size:16px}
  .sec{padding:66px 0}
  .cta-sec{padding:120px 0}
  .sec-head h2,.cta h2{font-size:26px}
  .m-br{display:inline}
  .why-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .why-card:last-child{grid-column:1/-1}
  .why-card{padding:24px 14px 22px}
  .why-ico{width:100px;height:84px}
  .why-key{font-size:19px}
  .why-ti{font-size:15px}
  .why-de{font-size:13px}
  .why-stats{grid-template-columns:repeat(2,1fr);row-gap:24px;padding:26px 12px}
  .why-stats strong{font-size:24px}
  .why-stats>div>span{font-size:13px}
  .cta h2 br,.cta .cta-q br{display:none}
  .cta .cta-q{font-size:26px}
  .cta .cta-lead{font-size:26px}
  .brand-wrap{padding:16px 22px;border-radius:22px}
  .brand-line{font-size:24px!important}
  .cta-btns{margin-top:48px}
  .grid{grid-template-columns:1fr}
  .card{min-height:0}
  .recv{padding:32px 22px}
  .recv h3{font-size:26px}
  .recv br{display:none} /* 데스크톱용 강제 줄바꿈 해제 → 폭에 맞춰 자연스럽게 개행 */
  .motion-sec{padding:72px 0}
  .motion{border-radius:18px}
  .cond{grid-template-columns:1fr}
  .cond>div{padding:22px 20px 24px}
  .cond .pic{height:240px}
  .btn{width:100%;justify-content:center}
}
/* 좁은 폰: 헤더 로고·전화 버튼 한 줄 유지 */
@media(max-width:480px){
  .hd-in{padding:0 16px;gap:8px}
  .logo{gap:5px}
  .logo img{height:18px}
  .logo img.logo-ai{height:21px}
  .logo .x{font-size:12px}
  .hd .hd-tel{font-size:12px;padding:6px 10px}
}
/* 모션 모바일 높이 (원본은 그대로, 랜딩에서만 덮어씀)
   - Pop: 기본(폭×4/3, 최소 480px)으로는 판화 5줄+카피+CTA가 겹침 → 모듈 계산상 약 685px 필요 → 720px 고정
   - Seeds·Umbrella: 원래 높이 + 40px (Seeds CTA가 아래에서 살짝 잘림)
     원래 높이 = min(max(폭×비율, 최소높이), 화면높이) / 폭은 .motion 기준 컨테이너 단위(cqw) */
.motion{container-type:inline-size}
@media(max-width:640px){
  .motion .pp-root.is-section{aspect-ratio:auto;height:720px;min-height:0;max-height:none}
  .motion .sd-root.is-section{aspect-ratio:auto;height:520px;height:calc(min(max(133.33cqw,480px),100dvh) + 40px);min-height:0;max-height:none}
  .motion .umb-root.is-section{aspect-ratio:auto;height:500px;height:calc(min(max(125cqw,420px),100dvh) + 40px);min-height:0;max-height:none}
}
/* Seeds 피날레 카피: 가로 배치일 때 텍스트 영역을 지도 쪽으로 40px 당기고(모듈 기본: 지도 끝 +32px)
   오른쪽 여백은 64px(모듈 기본: 폭의 7%, 약 84px) → 둘째 줄을 한 줄로 유지하면서 오른쪽에 여백
   (모듈이 left/right를 인라인으로 지정하므로 !important. 좁은 폭에선 넘칠 수 있어 모션 폭 1000px 이상에서만) */
@container (min-width:1000px){
  .motion .sd-block:not(.is-center){margin-left:-40px;right:64px!important}
  .motion .sd-block:not(.is-center) .sd-copy{white-space:pre}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}