/* 10-19 지수님 F′ — 로고 · 숫자 · 영문 = 명함과 같은 G마켓 산스(무료 · 한글 2,350자로 줄인 woff) */
@font-face{font-family:'Gmarket Sans';src:url(../fonts/gmarket-medium.woff) format('woff');font-weight:500;font-display:swap}
@font-face{font-family:'Gmarket Sans';src:url(../fonts/gmarket-bold.woff) format('woff');font-weight:700;font-display:swap}
/* 퍼포먼스 손 — 사이트 공통 스타일 */
:root{--brand:#431168;--paper:#F3F3F3;--panel:#E7E7E7;--line:#DDDDDD;--rule:#CFCFCF;--head:#6B6969;--tint:#ECE7F0;--ink:#1A1818;--muted:#4E4C4C}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:Pretendard,system-ui,sans-serif;font-size:16px;line-height:1.6;word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.nw{white-space:nowrap}
.pf .nw{display:inline;margin-top:0}

/* 머리 */
.nav{position:relative;z-index:5;max-width:1296px;margin:0 auto;padding:28px 48px;display:flex;align-items:center;gap:40px}
.logo{display:flex;align-items:baseline;gap:10px;color:var(--brand);font-weight:800;font-size:21px;letter-spacing:-.03em;margin-right:auto}
.logo small{font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:500;font-size:11.5px;letter-spacing:.16em;color:var(--ink);opacity:.75}
.menu{display:flex;gap:34px;font-size:15px;font-weight:500;color:var(--muted)}
.menu a:hover{color:var(--brand)}
.pill{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 6px 0 22px;border-radius:999px;background:var(--brand);color:#fff;font-size:15px;font-weight:700;white-space:nowrap}
.pill i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--brand);font-style:normal;font-weight:800}
.burger{display:none}

/* 첫 화면 */
.hero{position:relative;overflow:hidden;min-height:max(760px,calc(100vh - 104px))}
.in{position:relative;max-width:1296px;margin:0 auto;padding:56px 48px 72px}
.copy{position:relative;z-index:3;max-width:640px}
.kicker{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700;color:var(--brand);letter-spacing:-.01em}
.kicker:before{content:"";width:36px;height:2px;background:var(--brand)}
.kicker{flex-wrap:wrap;row-gap:6px}
.kicker .sg{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:clamp(20px,1.7vw,24px);color:var(--brand);letter-spacing:.005em;line-height:1.2}
.kicker .kt{padding-left:12px;border-left:1px solid var(--rule);font-size:14px;color:var(--muted);line-height:1.2}
h1{font-size:clamp(40px,6.1vw,88px);line-height:1.12;letter-spacing:-.055em;font-weight:800;margin-top:26px}
h1 span{display:block}
h1 em{font-style:normal;color:var(--brand);position:relative}
h1 em:after{content:"";position:absolute;left:.02em;right:.04em;bottom:.12em;height:.16em;background:var(--brand);opacity:.16;border-radius:2px}
.sub{text-wrap:balance;margin-top:26px;font-size:clamp(16px,1.35vw,19px);color:var(--muted);line-height:1.65;max-width:520px}
.sig{margin-top:10px;font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(19px,1.6vw,23px);color:var(--head);letter-spacing:.005em}

.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:40px;max-width:640px}
.pf{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;display:flex;flex-direction:column}
.pf b{font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:700;font-size:clamp(26px,2.4vw,34px);line-height:1.05;letter-spacing:-.04em;color:var(--brand);white-space:nowrap}
.pf b small{font-family:Pretendard,sans-serif;font-weight:800;font-size:.62em;letter-spacing:-.03em;margin-left:1px}
.pf span{display:block;margin-top:8px;font-size:14.5px;font-weight:600;line-height:1.45}
.pf em{display:block;white-space:normal;margin-top:auto;padding-top:10px;font-style:normal;font-size:13px;color:var(--muted);line-height:1.45}

.cta{display:flex;align-items:center;gap:26px;margin-top:36px}
.cta .pill{height:56px;font-size:16px;padding-left:26px}.cta .pill i{width:42px;height:42px}
.more{font-weight:700;font-size:16px;border-bottom:1.5px solid var(--ink);padding-bottom:2px}
.more:hover{color:var(--brand);border-color:var(--brand)}

.art{position:absolute;z-index:1;right:calc(min(44vw,700px) * -.12);bottom:40px;width:44%;max-width:700px}
.art img{display:block;width:100%;height:auto}
.chips{position:absolute;z-index:4;right:48px;bottom:30px;display:flex;gap:8px}
.chips span{font-size:14px;font-weight:600;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;white-space:nowrap}
.dock{display:none}

/* 움직임 — 처음 한 번만 */
.up{opacity:0;transform:translateY(18px);animation:up .8s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.08s}.d2{animation-delay:.18s}.d3{animation-delay:.3s}.d4{animation-delay:.42s}.d5{animation-delay:.54s}
.art.up{transform:translateY(40px);animation-duration:1.2s;animation-delay:.2s}
@keyframes up{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.up,.art.up{opacity:1;transform:none;animation:none}}

/* 태블릿 */
@media(max-width:1100px){.menu{display:none}.art{width:40%;right:-4.8%;bottom:70px}.copy{max-width:600px}}
/* 폰 */
@media(max-width:720px){
  .nav{padding:16px 20px;gap:12px}
  .logo{font-size:19px}.logo small{display:none}
  .nav .pill{display:none}
  .burger{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff}
  .burger i,.burger i:before,.burger i:after{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative}
  .burger i:before,.burger i:after{content:"";position:absolute;left:0}.burger i:before{top:-6px}.burger i:after{top:6px}
  .hero{min-height:0}
  .in{padding:22px 20px 112px}
  .kicker{font-size:14px}.kicker:before{width:24px}
  .kicker .kt{border-left:0;padding-left:36px}
  h1{font-size:clamp(34px,10.4vw,44px);margin-top:16px;line-height:1.16}
  .sub{margin-top:16px;font-size:16px}
  .sig{font-size:19px;margin-top:6px}
  .art{position:relative;right:auto;bottom:auto;width:auto;max-width:none;margin:18px -20px 0 0;display:flex;justify-content:flex-end}.art img{width:74%}
  .chips{position:absolute;left:0;right:auto;top:6px;bottom:auto;flex-direction:column;align-items:flex-start;gap:6px}
  .chips span{font-size:13px;padding:6px 12px}
  .proof{grid-template-columns:minmax(0,1fr);gap:0;margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:4px 18px}
  .pf{display:grid;grid-template-columns:118px minmax(0,1fr);column-gap:14px;align-items:baseline;border:0;border-radius:0;background:none;padding:14px 0}
  .pf+.pf{border-top:1px solid var(--line)}
  .pf b{font-size:26px;grid-row:1/3}
  .pf span{margin-top:0;font-size:15px}
  .pf em{grid-column:2;margin-top:2px;padding-top:0}
  .cta{display:none}
  .dock{display:flex;position:fixed;z-index:9;left:0;right:0;bottom:0;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(243,243,243,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .dock a{flex:1;display:flex;align-items:center;justify-content:center;height:52px;border-radius:14px;font-weight:700;font-size:15.5px}
  .dock .p{background:var(--brand);color:#fff;flex:1.6}
  .dock .g{background:#fff;border:1px solid var(--rule)}
}
/* ───── 메인 칸 2~8 ───── */
.sec{padding:120px 0}
.wrap{max-width:1296px;margin:0 auto;padding:0 48px}
.eb{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;color:var(--brand)}
.eb:before{content:"";width:28px;height:2px;background:currentColor}
.h2{font-size:clamp(30px,3.6vw,52px);line-height:1.2;letter-spacing:-.045em;font-weight:800;margin-top:18px}
.h2 em{font-style:normal;color:var(--brand)}
.lead{margin-top:18px;font-size:clamp(16px,1.3vw,18px);color:var(--muted);line-height:1.7;max-width:640px;text-wrap:balance}
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* 2 함께한 광고주 */
.brands{background:var(--brand);color:#fff;padding:96px 0}
.brands .eb{color:#D5C6F2}
.brands .h2{color:#fff}
.brands .h2 em{color:#D5C6F2}
.bg4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:56px;border-top:1px solid rgba(255,255,255,.18)}
.bg4>div{padding:28px 28px 8px 0}
.bg4>div+div{padding-left:28px;border-left:1px solid rgba(255,255,255,.18)}
.bg4 h3{font-size:15px;font-weight:700;color:#D5C6F2;letter-spacing:-.01em}
.lg{display:flex;flex-wrap:wrap;align-items:center;gap:22px 28px;margin-top:22px}
.lg img{display:block;height:30px;width:auto;opacity:.95}
.lg img.t{height:22px}.lg img.s{height:40px}
.lg span{font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em;opacity:.95}
.lg span.k{font-family:Pretendard,sans-serif;font-weight:800;letter-spacing:-.04em}
.brands .note{margin-top:34px;font-size:13.5px;color:#D5C6F2}

/* 3 약속 셋 */
.prom .rows{margin-top:56px;border-top:1.5px solid var(--ink)}
.prom .row{display:grid;grid-template-columns:120px 260px minmax(0,1fr);gap:24px;align-items:baseline;padding:34px 0;border-bottom:1px solid var(--rule)}
.prom .n{font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:700;font-size:15px;color:var(--brand);letter-spacing:.04em}
.prom h3{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.035em;font-weight:800}
.prom p{font-size:clamp(18px,1.55vw,22px);font-weight:600;letter-spacing:-.03em;line-height:1.55}
.prom p small{display:block;margin-top:8px;font-size:15.5px;font-weight:400;color:var(--muted);letter-spacing:-.01em}

/* 4 운영 사례 */
.cases{background:#fff}
.cs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:56px}
.cc{grid-column:span 2;background:var(--paper);border-radius:22px;padding:28px 26px 24px;display:flex;flex-direction:column;min-height:280px}
.cc.big{grid-column:span 3;min-height:320px}
.cc .v{font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:700;font-size:clamp(44px,4.4vw,64px);line-height:1;letter-spacing:-.05em;color:var(--brand)}
.cc .v small{font-size:.42em;letter-spacing:-.02em;margin-left:4px;font-family:Pretendard,sans-serif;font-weight:800}
.cc .v i{font-style:normal;font-size:.5em;color:var(--head);margin:0 8px;vertical-align:.25em}
.cc .m{margin-top:10px;font-size:15px;font-weight:700;color:var(--muted)}
.cc h3{margin-top:auto;padding-top:26px;font-size:22px;letter-spacing:-.035em;font-weight:800}
.cc p{margin-top:6px;font-size:15px;color:var(--muted);line-height:1.6}
.cc .tag{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px}
.cc .tag span{font-size:13px;font-weight:600;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 11px;color:var(--muted)}
.cc .tag span.ih{background:var(--tint);border-color:#D0C4D9;color:var(--brand)}
.cc details{margin-top:16px}
.cc summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--brand);list-style:none}
.cc summary::-webkit-details-marker{display:none}
.cc summary:after{content:" ↓"}.cc details[open] summary:after{content:" ↑"}
.cc details img{display:block;width:100%;margin-top:12px;border-radius:12px;border:1px solid var(--line);background:#fff}
.cases .note{margin-top:22px;font-size:13.5px;color:var(--muted)}

/* 5 광고 서비스 */
.svc .top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:end}
.svc .top ul{list-style:none;font-size:15.5px;color:var(--muted)}
.svc .top li{padding:12px 0;border-top:1px solid var(--rule)}
.svc .top li b{color:var(--ink);margin-right:8px}
.mt{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:48px}
.mt>div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 20px}
.mt h3{font-size:17px;font-weight:800;letter-spacing:-.03em;padding-bottom:12px;border-bottom:1.5px solid var(--brand);color:var(--brand)}
.mt ul{list-style:none;margin-top:12px;font-size:15px;line-height:1.5}
.mt li{padding:6px 0}
.mt li.x:after{content:"*";color:var(--brand);font-weight:800;margin-left:3px}
.fee{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;margin-top:16px}
.fee>div{border-radius:18px;padding:26px 28px}
.fee .a{background:var(--brand);color:#fff}
.fee .a h3{font-size:15px;font-weight:700;color:#D5C6F2}
.fee .a p{margin-top:10px;font-size:17px;line-height:1.65}
.fee .a p+p{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.2)}
.fee .a p small{display:block;font-size:14px;color:#D5C6F2;margin-top:4px}
.fee .b{background:var(--panel);display:flex;flex-direction:column;justify-content:center;gap:10px}
.fee .b a{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border-radius:14px;padding:16px 18px;font-weight:700;font-size:15.5px;line-height:1.45}
.fee .b a small{display:block;font-weight:500;font-size:13.5px;color:var(--muted)}
.fee .b a i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;font-style:normal}
.fee .b .c{font-size:13.5px;color:var(--muted);padding:0 4px}

/* 6 컨설팅 */
.cons{background:#fff}
.cn{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:center}
.cn .sv{margin-top:36px;display:grid;gap:14px}
.cn .sv>div{background:var(--paper);border-radius:18px;padding:22px 24px}
.cn .sv h3{font-size:19px;font-weight:800;letter-spacing:-.03em}
.cn .sv p{margin-top:6px;font-size:15px;color:var(--muted)}
.cn .res{display:flex;gap:10px;margin-top:14px}
.cn .res span{flex:1;background:var(--tint);border-radius:14px;padding:14px 16px;font-size:14px;font-weight:600;color:var(--muted)}
.cn .res b{display:block;font-family:'Gmarket Sans',Pretendard,sans-serif;font-size:28px;color:var(--brand);letter-spacing:-.04em;line-height:1.1}
.ph{display:flex;gap:18px;justify-content:center}
.ph figure{margin:0;width:46%;max-width:240px}
.ph .fr{border-radius:30px;border:8px solid var(--ink);overflow:hidden;background:#fff;aspect-ratio:9/17}
.ph .fr img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.ph figure:nth-child(2){margin-top:48px}
.ph figcaption{margin-top:12px;text-align:center;font-size:14px;font-weight:700}
.ph figcaption small{display:block;font-weight:500;color:var(--muted);font-size:13px}

/* 7 일하는 방식 */
.st{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:56px;counter-reset:s}
.st>div{position:relative;border-top:2px solid var(--brand);padding-top:20px}
.st>div:before{counter-increment:s;content:"0" counter(s);font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:700;font-size:14px;color:var(--brand)}
.st h3{margin-top:8px;font-size:22px;font-weight:800;letter-spacing:-.035em}
.st p{margin-top:6px;font-size:15px;color:var(--muted);line-height:1.6}
.dash{margin-top:56px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:0 24px 60px rgba(67,17,104,.08)}
.dash .hd{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.dash .hd b{color:var(--ink);font-size:16px;margin-right:auto}
.dash .hd span{background:var(--tint);color:var(--brand);border-radius:999px;padding:4px 12px;font-weight:700;font-size:13px}
.kp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}
.kp div{background:var(--paper);border-radius:14px;padding:16px 18px}
.kp small{display:block;font-size:13px;color:var(--muted);font-weight:600}
.kp b{display:block;margin-top:6px;font-family:'Gmarket Sans',Pretendard,sans-serif;font-size:28px;letter-spacing:-.04em;filter:blur(5px);user-select:none}
.kp em{display:block;margin-top:2px;font-style:normal;font-size:13px;font-weight:700;color:var(--brand)}
.bars{display:flex;align-items:flex-end;gap:6px;height:150px;margin-top:22px;padding:0 4px;border-bottom:1px solid var(--line)}
.bars i{flex:1;background:#D0C4D9;border-radius:5px 5px 0 0}
.bars i:nth-last-child(-n+3){background:var(--brand)}
.dash .cap{margin-top:14px;font-size:13px;color:var(--muted)}

/* 8 대표 소개 · 문의 */
.about{background:var(--ink);color:#fff}
.about .eb{color:var(--brand-l,#b79ae0)}
.ab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}
.ab .q{font-size:clamp(30px,3.4vw,48px);font-weight:800;letter-spacing:-.05em;line-height:1.25;margin-top:18px}
.ab .q em{font-style:normal;color:#b79ae0}
.ab .who{margin-top:28px;font-size:16px;color:#C9C4D2;line-height:1.75;max-width:520px}
.ab .who b{color:#fff}
.tl{list-style:none;border-left:1.5px solid rgba(255,255,255,.22);margin-top:6px}
.tl li{position:relative;padding:0 0 28px 30px}
.tl li:before{content:"";position:absolute;left:-6px;top:6px;width:10px;height:10px;border-radius:50%;background:#1A1818;border:2px solid #b79ae0}
.tl li.now:before{background:#b79ae0}
.tl b{font-family:'Gmarket Sans',Pretendard,sans-serif;font-size:15px;color:#b79ae0;letter-spacing:.02em}
.tl h3{margin-top:4px;font-size:19px;font-weight:800;letter-spacing:-.03em}
.tl p{margin-top:4px;font-size:14.5px;color:#C9C4D2}
.ct{margin-top:72px;padding-top:40px;border-top:1px solid rgba(255,255,255,.18);display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.ct .go{display:flex;align-items:center;justify-content:space-between;background:#fff;color:var(--brand);border-radius:18px;padding:22px 24px;font-weight:800;font-size:18px;letter-spacing:-.03em}
.ct .go i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--brand);color:#fff;font-style:normal}
.ct a.k{display:block;border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:18px 20px}
.ct a.k small{display:block;font-size:13px;color:#C9C4D2}
.ct a.k span{display:block;margin-top:4px;font-weight:700;font-size:16px;word-break:break-all}
.foot{background:var(--ink);color:#8E8994;font-size:13px;padding:0 0 40px}
.foot .wrap{display:flex;justify-content:space-between;gap:16px;border-top:1px solid rgba(255,255,255,.1);padding-top:24px}
.foot b{color:#fff;font-size:15px}

@media(max-width:1100px){
  .bg4{grid-template-columns:1fr 1fr}.bg4>div:nth-child(3){border-left:0;padding-left:0}
  .cs{grid-template-columns:1fr 1fr}.cc,.cc.big{grid-column:span 1}
  .mt{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ct{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .sec{padding:56px 0}.wrap{padding:0 20px} /* 11-01 밤 폰 칸 사이 160 → 112(J6 390 점검 ①) */
  .h2{font-size:clamp(27px,8vw,34px)}
  .brands{padding:72px 0}
  .bg4{grid-template-columns:minmax(0,1fr);margin-top:36px}.bg4>div,.bg4>div+div{padding:22px 0 10px;border-left:0}.bg4>div+div{border-top:1px solid rgba(255,255,255,.18)}
  .lg{gap:18px 22px}.lg img{height:24px}.lg img.t{height:18px}.lg img.s{height:32px}.lg span{font-size:16px}
  .prom .rows{margin-top:36px}
  .prom .row{grid-template-columns:minmax(0,1fr);gap:6px;padding:24px 0}
  .cs{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:36px}
  .cc,.cc.big{min-height:0;padding:24px 22px}
  .cc h3{padding-top:18px}
  .svc .top{grid-template-columns:minmax(0,1fr);gap:24px}
  .mt{grid-template-columns:1fr 1fr;gap:10px;margin-top:32px}.mt>div{padding:18px 16px}.mt>div:last-child{grid-column:span 2}
  .fee{grid-template-columns:minmax(0,1fr)}.fee>div{padding:22px 20px}
  .cn{grid-template-columns:minmax(0,1fr);gap:40px}
  .ph figure:nth-child(2){margin-top:32px}
  .st{grid-template-columns:1fr 1fr;gap:28px 14px;margin-top:36px}
  .dash{padding:18px;margin-top:36px}.kp{grid-template-columns:1fr 1fr}.bars{height:110px}
  .ab{grid-template-columns:minmax(0,1fr);gap:44px}
  .ct{grid-template-columns:minmax(0,1fr);margin-top:48px}
  .foot{padding-bottom:110px}.foot .wrap{flex-direction:column}
}

/* ───── 2판(10-19 벤치마크 반영) — AI 운영 · 대시보드 · 서비스 카드 · 문의 폼 · 하위 쪽 ───── */
.menu a.on{color:var(--brand);font-weight:700}
.lg img.w{height:26px}

/* 떠 있는 문의 단추(PC) */
.float{position:fixed;z-index:20;right:28px;bottom:28px;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .35s,transform .35s;box-shadow:0 14px 34px rgba(67,17,104,.28)}
.float.on{opacity:1;transform:none;pointer-events:auto}
.float.on.blk{opacity:0;transform:translateY(16px);pointer-events:none}

/* 더 보기 링크 */
.go2{display:inline-flex;align-items:center;gap:10px;margin-top:34px;font-weight:700;font-size:15.5px;color:var(--brand);border-bottom:1.5px solid currentColor;padding-bottom:3px}
.dark .go2,.about .go2{color:#b79ae0}

/* AI 운영 체계 */
.ai{background:#121016;color:#fff;overflow:hidden;position:relative}
.ai:before{content:"";position:absolute;right:-12%;top:-30%;width:70%;height:90%;background:radial-gradient(closest-side,rgba(121,73,181,.35),transparent);pointer-events:none}
.ai .eb{color:#b79ae0}
.ai .h2{color:#fff}.ai .h2 em{color:#b79ae0}
.ai .lead{color:#BDB6C9}
.flow4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:52px;position:relative}
.flow4>div{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:22px 22px 24px;position:relative}
.flow4>div:after{content:"→";position:absolute;right:-12px;top:50%;transform:translate(50%,-50%);color:#b79ae0;font-weight:800;z-index:2}
.flow4>div:last-child:after{display:none}
.flow4 b{font-family:'Gmarket Sans',Pretendard,sans-serif;font-size:13px;color:#b79ae0;letter-spacing:.06em}
.flow4 h3{margin-top:10px;font-size:20px;font-weight:800;letter-spacing:-.03em}
.flow4 p{margin-top:8px;font-size:14.5px;color:#BDB6C9;line-height:1.6}
.flow4 .me{background:linear-gradient(160deg,#4a1a72,#2a0f42);border-color:rgba(183,154,224,.4)}

/* 대시보드 모형 — 실제 화면처럼 */
.db{margin-top:56px;border-radius:18px;overflow:hidden;background:#0B0A0E;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 90px rgba(0,0,0,.55);font-size:13px;color:#E9E5F0}
.db .bar{display:flex;align-items:center;gap:8px;padding:11px 16px;background:#16131C;border-bottom:1px solid rgba(255,255,255,.07)}
.db .bar i{width:10px;height:10px;border-radius:50%;background:#3A3542}.db .bar i:nth-child(1){background:#FF5F57}.db .bar i:nth-child(2){background:#FEBC2E}.db .bar i:nth-child(3){background:#28C840}
.db .bar span{margin-left:14px;flex:1;max-width:420px;background:#0B0A0E;border-radius:7px;padding:5px 12px;color:#8C8596;font-size:12px}
.db .body{display:grid;grid-template-columns:200px minmax(0,1fr)}
.db .side{background:#100E14;border-right:1px solid rgba(255,255,255,.06);padding:18px 14px}
.db .side .lo{font-weight:800;color:#fff;font-size:14px;letter-spacing:-.02em}
.db .side .lo small{display:block;font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.14em;color:#8C8596;margin-top:2px}
.db .side ul{list-style:none;margin-top:22px;display:grid;gap:4px}
.db .side li{padding:8px 10px;border-radius:8px;color:#A49DAF;display:flex;align-items:center;gap:8px}
.db .side li:before{content:"";width:7px;height:7px;border-radius:2px;background:#3A3542}
.db .side li.on{background:rgba(183,154,224,.12);color:#fff}.db .side li.on:before{background:#b79ae0}
.db .side .acc{margin-top:22px;padding:12px;border-radius:10px;background:#17141D;color:#8C8596;font-size:12px;line-height:1.5}
.db .side .acc b{display:block;color:#E9E5F0;font-size:13px;filter:blur(3.5px)}
.db .main{padding:20px 22px 22px}
.db .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.db .top h4{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-right:auto}
.db .top span{background:#17141D;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:6px 10px;color:#BDB6C9}
.db .live{display:inline-flex;align-items:center;gap:6px;color:#9BE3B5!important}
.db .live:before{content:"";width:7px;height:7px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.db .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.db .kpi{background:#15121A;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px 14px 10px}
.db .kpi small{color:#8C8596;font-size:12px}
.db .kpi b{display:block;margin-top:4px;font-family:'Gmarket Sans',Pretendard,sans-serif;font-size:24px;letter-spacing:-.03em;color:#fff}
.db .kpi em{font-style:normal;font-size:12px;font-weight:700}
.db .up2{color:#3DDC84}.db .dn2{color:#FF7A7A}
.db .kpi svg{display:block;width:100%;height:30px;margin-top:6px}
.db .row2{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:10px;margin-top:10px}
.db .card{background:#15121A;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px}
.db .card h5{font-size:13px;font-weight:700;color:#E9E5F0;display:flex;justify-content:space-between}
.db .card h5 small{color:#8C8596;font-weight:500}
.db .chart{display:block;width:100%;height:190px;margin-top:8px}
.db .lg2{display:flex;gap:14px;margin-top:4px;color:#8C8596;font-size:11.5px}
.db .lg2 i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle}
.db .alerts{list-style:none;margin-top:10px;display:grid;gap:8px}
.db .alerts li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:start;padding:10px;border-radius:10px;background:#1B1721;line-height:1.45;color:#D7D1E0}
.db .alerts li small{display:block;color:#8C8596;font-size:11.5px;margin-top:2px}
.db .alerts .ic{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:800}
.db .ic.r{background:rgba(255,122,122,.16);color:#FF9A9A}.db .ic.y{background:rgba(254,188,46,.16);color:#FEC84B}.db .ic.g{background:rgba(61,220,132,.14);color:#6BE3A0}
.db table{width:100%;border-collapse:collapse;margin-top:10px;font-variant-numeric:tabular-nums}
.db th{text-align:right;color:#8C8596;font-weight:500;font-size:11.5px;padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.07)}
.db td{text-align:right;padding:9px 8px;border-bottom:1px solid rgba(255,255,255,.05);color:#E9E5F0}
.db th:first-child,.db td:first-child{text-align:left}
.db td .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px}
.db td .bar2{display:inline-block;height:6px;border-radius:3px;background:linear-gradient(90deg,#7B4FB0,#b79ae0);vertical-align:middle}
.db .note{margin-top:12px;color:#6E6779;font-size:11.5px}
.db [data-n]{transition:none}

/* 서비스 카드 */
.svc4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:52px}
.sv4{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 24px 24px;display:flex;flex-direction:column;min-height:300px;transition:transform .25s,box-shadow .25s}
.sv4:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(67,17,104,.10)}
.sv4 .no{font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:700;font-size:13px;color:var(--brand);letter-spacing:.06em}
.sv4 h3{margin-top:14px;font-size:22px;font-weight:800;letter-spacing:-.035em;line-height:1.3}
.sv4 p{margin-top:10px;font-size:15px;color:var(--muted);line-height:1.6}
.sv4 ul{list-style:none;margin-top:auto;padding-top:20px;display:flex;flex-wrap:wrap;gap:6px}
.sv4 li{font-size:13px;font-weight:600;background:var(--paper);border-radius:999px;padding:5px 11px;color:var(--muted)}
.sv4.ai4{background:var(--brand);border-color:var(--brand);color:#fff}
.sv4.ai4 .no{color:#D5C6F2}.sv4.ai4 p{color:#D5C6F2}.sv4.ai4 li{background:rgba(255,255,255,.12);color:#fff}

/* 문의 폼 */
.form{margin-top:72px;padding-top:44px;border-top:1px solid rgba(255,255,255,.18);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px}
.form h3{font-size:clamp(24px,2.4vw,34px);font-weight:800;letter-spacing:-.04em;line-height:1.3}
.form .side p{margin-top:12px;color:#C9C4D2;font-size:15.5px;line-height:1.7}
.form .side .k2{margin-top:24px;display:grid;gap:8px;font-size:15px}
.form .side .k2 a{display:flex;gap:12px;color:#fff}.form .side .k2 small{width:44px;color:#8E8994}
.form form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:#C9C4D2}
.form label.full{grid-column:1/-1}
.form input,.form select,.form textarea{font:inherit;font-size:15.5px;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:13px 14px;outline:none}
.form input:focus,.form select:focus,.form textarea:focus{border-color:#b79ae0;background:rgba(255,255,255,.09)}
.form select option{color:#1A1818}
.form textarea{min-height:96px;resize:vertical}
.form button{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;background:#fff;color:var(--brand);border:0;border-radius:14px;padding:18px 22px;font:inherit;font-weight:800;font-size:17px;cursor:pointer}
.form button i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;font-style:normal}
.form .fine{grid-column:1/-1;font-size:12.5px;color:#8E8994}

/* 하위 쪽 머리 */
.ph2{padding:72px 0 64px;border-bottom:1px solid var(--rule)}
.ph2 .crumb{font-size:13.5px;color:var(--muted)}
.ph2 .crumb a{color:var(--brand);font-weight:700}
.ph2 h1{font-size:clamp(36px,5vw,68px);margin-top:18px}
.ph2 .lead{margin-top:20px;max-width:720px}
.chipsF{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.chipsF button{font:inherit;font-size:14.5px;font-weight:700;background:#fff;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:9px 16px;cursor:pointer}
.chipsF button.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* 사례 상세 */
.cd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;background:#fff;border-radius:26px;padding:40px;margin-top:20px;align-items:start}
.cd .v{font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:700;font-size:clamp(48px,5vw,76px);line-height:1;letter-spacing:-.05em;color:var(--brand)}
.cd .v small{font-size:.4em;margin-left:4px;font-family:Pretendard,sans-serif;font-weight:800}
.cd .m{margin-top:8px;font-weight:700;color:var(--muted)}
.cd h2{margin-top:28px;font-size:28px;font-weight:800;letter-spacing:-.04em}
.cd .tag{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.cd .tag span{font-size:13px;font-weight:600;background:var(--paper);border-radius:999px;padding:5px 12px;color:var(--muted)}
.cd .tag span.ih{background:var(--tint);color:var(--brand)}
.cd dl{display:grid;gap:18px}
.cd dt{font-size:13px;font-weight:800;color:var(--brand);letter-spacing:.02em}
.cd dd{margin-top:6px;font-size:16px;line-height:1.7}
.cd dd ul{padding-left:18px}.cd dd li{margin-top:4px}
.cd .fig{margin-top:22px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.cd .fig img{display:block;width:100%}
.cd .kp3{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));margin-top:10px;border-top:1.5px solid var(--brand)}
.cd .kp3 span{padding:14px 14px 2px 0;font-weight:600;font-size:14px;color:var(--muted);line-height:1.45}
.cd .kp3 span+span{padding-left:14px;border-left:1px solid var(--line)}
.cd .kp3 b{display:block;margin-bottom:4px;font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:700;font-size:28px;line-height:1.05;letter-spacing:-.04em;color:var(--brand);font-variant-numeric:tabular-nums;white-space:nowrap}
.cd .lgs{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px;min-height:50px}
.cd .lgs img{display:block;height:var(--h);width:auto;max-width:150px;filter:brightness(0);opacity:.82}
.cd .lgs+h2{margin-top:16px}
.svc4 .sv4{min-height:0}
.cd[hidden]{display:none}

/* 대표 소개 */
.cv2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
.story p{font-size:18px;line-height:1.85;color:var(--ink);margin-top:18px}
.story p b{color:var(--brand)}
.story h3{font-size:22px;font-weight:800;letter-spacing:-.03em;margin-top:40px}
.story h3:first-child{margin-top:0}
.tl2{list-style:none;border-left:1.5px solid var(--rule)}
.tl2 li{position:relative;padding:0 0 30px 28px}
.tl2 li:before{content:"";position:absolute;left:-6px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--brand)}
.tl2 li.now:before{background:var(--brand)}
.tl2 b{font-family:'Gmarket Sans',Pretendard,sans-serif;font-size:14px;color:var(--brand)}
.tl2 h4{margin-top:4px;font-size:18px;font-weight:800;letter-spacing:-.03em}
.tl2 p{margin-top:4px;font-size:15px;color:var(--muted);line-height:1.6}
.badges{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:36px}
.badges div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px}
.badges h4{font-size:14px;color:var(--brand);font-weight:800}
.badges p{margin-top:8px;font-size:15px;line-height:1.6}

/* 광고 서비스 쪽 */
.proc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:40px;counter-reset:p}
.proc div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px}
.proc div:before{counter-increment:p;content:"STEP 0" counter(p);font-family:'Gmarket Sans',Pretendard,sans-serif;font-size:12px;font-weight:700;color:var(--brand);letter-spacing:.06em}
.proc h4{margin-top:8px;font-size:18px;font-weight:800;letter-spacing:-.03em}
.proc p{margin-top:6px;font-size:14.5px;color:var(--muted);line-height:1.55}

@media(max-width:1100px){
  .flow4{grid-template-columns:1fr 1fr}.flow4>div:nth-child(2):after{display:none}
  .db .body{grid-template-columns:minmax(0,1fr)}.db .side{display:none}
  .svc4{grid-template-columns:1fr 1fr}
  .proc{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:720px){
  .float{display:none}
  .flow4{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:32px}.flow4>div:after{content:"↓";right:50%;top:auto;bottom:-15px;transform:translateX(50%)}.flow4>div:nth-child(2):after{display:block}
  .db{margin-top:36px;border-radius:14px;font-size:12.5px}
  .db .main{padding:14px}
  .db .kpis{grid-template-columns:1fr 1fr;gap:8px}
  .db .kpi b{font-size:20px}
  .db .row2{grid-template-columns:minmax(0,1fr)}
  .db .chart{height:150px}
  .db .tbl{overflow-x:auto}
  .db table{min-width:420px}
  .db .bar span{display:none}
  .svc4{grid-template-columns:minmax(0,1fr);margin-top:32px}.sv4{min-height:0}
  .form{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:48px}
  .form form{grid-template-columns:minmax(0,1fr)}
  .ph2{padding:40px 0 36px}
  .cd{grid-template-columns:minmax(0,1fr);padding:24px 20px;gap:24px;border-radius:20px}
  .cv2{grid-template-columns:minmax(0,1fr);gap:40px}
  .story p{font-size:16.5px}
  .badges{grid-template-columns:minmax(0,1fr)}
  .proc{grid-template-columns:1fr 1fr}
}
/* 접힌 메뉴 열기(1100px 아래) */
@media(max-width:1100px){
  .burger{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer}
  .burger i,.burger i:before,.burger i:after{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative}
  .burger i:before,.burger i:after{content:"";position:absolute;left:0}.burger i:before{top:-6px}.burger i:after{top:6px}
  body.mopen .menu{display:flex;flex-direction:column;gap:0;position:absolute;left:16px;right:16px;top:calc(100% - 4px);background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 20px 40px rgba(0,0,0,.1);z-index:30}
  body.mopen .menu a{padding:14px 12px;font-size:16px;color:var(--ink)}
}

/* 광고주 + 운영 사례 묶음 */
.brands .lead{color:#D5C6F2}
/* 로고 벽 — 같은 칸 18개 · 업종 고르면 그 칸만 또렷 */
.bw{margin-top:48px}
.bf{display:flex;flex-wrap:wrap;gap:8px}
.bf button{height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:none;color:#fff;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.bf button:hover{border-color:#fff}
.bf button.on{background:#fff;color:var(--brand);border-color:#fff}
.bf button:focus-visible,.nb a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lw{list-style:none;margin-top:22px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.16);border-left:1px solid rgba(255,255,255,.16)}
.lw li{display:grid;place-items:center;height:116px;padding:0 18px;border-right:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);transition:opacity .25s,background .25s}
.lw img{display:block;height:var(--h);width:auto;max-width:100%;object-fit:contain}
.lw.f li{opacity:.16}
.lw.f li.hit{opacity:1;background:rgba(255,255,255,.06)}
/* 그때 낸 숫자 — 카드 대신 한 줄 띠 */
.bh{margin-top:72px;font-size:14px;font-weight:700;color:#D5C6F2;letter-spacing:-.01em}
.nb{list-style:none;margin-top:18px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.32)}
.nb li{transition:opacity .25s}
.nb li+li{border-left:1px solid rgba(255,255,255,.16)}
.nb a{display:flex;flex-direction:column;height:100%;padding:28px 22px 6px}
.nb li:first-child a{padding-left:0}
.nb b{font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:700;font-size:clamp(46px,4.3vw,66px);line-height:1;letter-spacing:-.05em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.nb b small{font-size:.42em;margin-left:3px;font-family:Pretendard,sans-serif;font-weight:800;color:#D5C6F2;letter-spacing:-.02em}
.nb span{margin-top:12px;font-size:14px;font-weight:600;color:#D5C6F2;line-height:1.45}
.nb strong{margin-top:20px;font-size:16.5px;font-weight:800;letter-spacing:-.03em;line-height:1.4}
.nb em{margin-top:4px;font-style:normal;font-size:13.5px;color:#D5C6F2;line-height:1.5}
.nb a:hover b{color:#D5C6F2}
.nb.f li{opacity:.3}.nb.f li.hit{opacity:1}
.bn{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.bn p{font-size:13.5px;color:#D5C6F2}
.bn .go2{margin-top:0}
@media(max-width:1180px){.nb a{padding:24px 14px 6px}.nb b{font-size:40px}.nb span{font-size:13.5px}.nb strong{font-size:15px}.nb em{font-size:13px}}
@media(max-width:900px){.lw{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:720px){.bw{margin-top:32px}.bf{gap:6px}.bf button{padding:0 14px;font-size:14px}
  .lw{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}.lw li{height:86px;padding:0 8px}.lw img{height:calc(var(--h)*.74)}
  .bh{margin-top:48px}
  .bn{margin-top:28px}}
.ai .go2{color:#b79ae0}.brands .go2{color:#fff}
/* 쪽 끝 큰 문장 · 회색 바탕 위 카드 */
.about .q{font-size:clamp(30px,3.4vw,48px);font-weight:800;letter-spacing:-.05em;line-height:1.25}
.about .q em{font-style:normal;color:#b79ae0}
.prom .cc{background:#fff}
@media(max-width:720px){.cd .kp3{grid-template-columns:1fr 1fr}.cd .kp3 span:nth-child(odd){padding-left:0;border-left:0}.cd .kp3 span:nth-child(n+3){border-top:1px solid var(--line)}.cd .kp3 b{font-size:24px}.cd .lgs{margin-top:22px;min-height:0}}

@media(max-width:900px){.nb{grid-template-columns:minmax(0,1fr)}.nb li+li{border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .nb a,.nb li:first-child a{display:grid;grid-template-columns:clamp(132px,24vw,200px) minmax(0,1fr);column-gap:16px;align-items:baseline;padding:20px 0}
  .nb b{grid-row:1/4;font-size:44px}.nb span{margin-top:0;grid-column:2}.nb strong{margin-top:6px;grid-column:2;font-size:16px}.nb em{grid-column:2}}
/* 첫 화면 로고 띠가 생겨 로고 벽을 뺌(지수님 10-19 「숫자만 남기고」) — 숫자 띠가 머리글 바로 아래로 */
.brands .lead+.bh{margin-top:48px}

/* 광고 운영 — 고객 단계(퍼널) 탭 + 단계마다 바뀌는 사례 판 (지수님 10-19 · 컨설팅 칸을 합침) */
.fn{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 6px;margin-top:52px;align-items:center}
.fn button{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;border:0;cursor:pointer;font:inherit;text-align:left;color:var(--brand);background:var(--tint);padding:0 44px 0 28px;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,0 100%,26px 50%);transition:background .25s,color .25s}
.fn button:first-child{clip-path:polygon(0 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,0 100%);border-radius:14px 0 0 14px;padding-left:24px}
.fn button:nth-child(1){height:128px}.fn button:nth-child(2){height:114px}.fn button:nth-child(3){height:100px}.fn button:nth-child(4){height:86px}
.fn button i{font-style:normal;font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;opacity:.7}
.fn button b{font-size:clamp(18px,1.6vw,22px);font-weight:800;letter-spacing:-.03em;line-height:1.25}
.fn button small{font-family:'Gmarket Sans',Pretendard,sans-serif;font-size:13px;font-weight:500;opacity:.75}
.fn button:hover{background:#DDD1E8}
.fn button.on{background:var(--brand);color:#fff}
.fn button:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.fn button.all{grid-column:1/-1;height:52px;flex-direction:row;align-items:center;gap:12px;clip-path:none;border-radius:999px;padding:0 24px;background:#fff;border:1px solid var(--line);margin-top:6px}
.fn button.all b{font-size:16px}.fn button.all i{opacity:1;color:var(--brand)}
.fn button.all.on{background:var(--ink);color:#fff;border-color:var(--ink)}.fn button.all.on i{color:#D5C6F2}
.fps{margin-top:18px}
.fp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:26px;padding:44px;min-height:440px}
.fp[hidden]{display:none}
.fp.on{animation:fpIn .5s cubic-bezier(.16,1,.3,1)}
@keyframes fpIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fp .fst{font-size:14px;font-weight:700;color:var(--brand)}
.fp h3{margin-top:10px;font-size:clamp(28px,2.8vw,40px);font-weight:800;letter-spacing:-.045em;line-height:1.25}
.fp .do{list-style:none;margin-top:22px;border-top:1px solid var(--line)}
.fp .do li{padding:12px 0 12px 22px;border-bottom:1px solid var(--line);font-size:15.5px;position:relative;line-height:1.55}
.fp .do li:before{content:"";position:absolute;left:2px;top:21px;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.fp .md{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.fp .md li{font-size:13px;font-weight:600;background:var(--paper);border-radius:999px;padding:5px 12px;color:var(--muted)}
.fp .lgs{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.fp .lgs img{display:block;height:var(--h);width:auto;max-width:140px;filter:brightness(0);opacity:.82}
.fp .nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-top:22px;border-top:1.5px solid var(--brand)}
.fp .nums div{padding:16px 16px 0 0}.fp .nums div+div{padding-left:16px;border-left:1px solid var(--line)}
.fp .nums b{display:block;font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:700;font-size:clamp(44px,4.4vw,68px);line-height:1;letter-spacing:-.05em;color:var(--brand);white-space:nowrap}
.fp .nums b small{font-size:.42em;margin-left:3px;font-family:Pretendard,sans-serif;font-weight:800}
.fp .nums span{display:block;margin-top:8px;font-size:14px;font-weight:700;color:var(--muted)}
.fp .nums.sm b{font-size:clamp(28px,2.4vw,36px)}
.fp .who{margin-top:22px;font-size:14px;color:var(--muted);line-height:1.6}
.fp .who strong{display:block;font-size:18px;color:var(--ink);letter-spacing:-.03em;margin-bottom:2px}
.cs1,.cs2{background:var(--paper);border-radius:20px;padding:32px}
.cs2 .pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cs2 .pair .lgs{min-height:50px}
.cs2 .pair b{display:block;margin-top:14px;font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:700;font-size:clamp(40px,3.8vw,58px);line-height:1;letter-spacing:-.05em;color:var(--brand)}
.cs2 .pair b small{font-size:.42em;margin-left:3px;font-family:Pretendard,sans-serif;font-weight:800}
.cs2 .pair span{display:block;margin-top:8px;font-size:13.5px;font-weight:700;color:var(--muted)}
.cs2 .fig{margin-top:22px;background:#fff;border-radius:14px;border:1px solid var(--line);padding:10px}
.cs2 .fig img{display:block;width:100%;border-radius:8px}
.cs2 .fig figcaption{margin-top:8px;font-size:12.5px;color:var(--muted)}
.cs3{display:flex;justify-content:center;gap:22px;align-items:flex-start}
.cs3 figure{width:min(46%,240px)}
.cs3 figure:nth-child(2){margin-top:44px}
.cs3 .fr{border-radius:30px;border:8px solid var(--ink);overflow:hidden;background:#fff;aspect-ratio:9/17}
.cs3 .fr img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.cs3 figcaption{margin-top:12px;text-align:center;font-weight:800;font-size:15px}
.cs3 figcaption small{display:block;font-weight:500;color:var(--muted);font-size:13px}
.fp.dk{background:#141117;border-color:#141117;color:#fff}
.fp.dk .fst{color:#D5C6F2}.fp.dk .do{border-color:rgba(255,255,255,.16)}.fp.dk .do li{border-color:rgba(255,255,255,.16);color:#E4DFEA}.fp.dk .do li:before{background:#B79AE0}
.fp.dk .go2{color:#B79AE0;margin-top:26px}
.cs5{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px;border-top:1.5px solid #B79AE0}
.cs5 div{padding:18px 16px 0 0}.cs5 div+div{padding-left:16px;border-left:1px solid rgba(255,255,255,.16)}
.cs5 b{display:block;font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:700;font-size:clamp(40px,3.8vw,58px);line-height:1;letter-spacing:-.05em}
.cs5 span{display:block;margin-top:8px;font-size:14px;color:#D5C6F2;font-weight:600}
@media(max-width:1000px){.fp{grid-template-columns:minmax(0,1fr);gap:28px;padding:32px}.fn button{padding-right:36px}}
@media(max-width:720px){
  .fn{display:flex;overflow-x:auto;gap:6px;margin:32px -20px 0;padding:0 20px 6px;scroll-snap-type:x mandatory}
  .fn button,.fn button:first-child{flex:none;height:64px!important;clip-path:none;border-radius:14px;padding:0 18px;scroll-snap-align:start}
  .fn button.all{height:64px;margin-top:0;flex-direction:column;align-items:flex-start;gap:2px;border-radius:14px}
  .fn button b{font-size:16px}
  .fp{padding:22px 20px;border-radius:20px;min-height:0}
  .cs1,.cs2{padding:20px}.cs2 .pair{grid-template-columns:1fr}
  .cs5{grid-template-columns:minmax(0,1fr)}.cs5 div,.cs5 div+div{padding:14px 0;border-left:0}.cs5 div+div{border-top:1px solid rgba(255,255,255,.16)}
}
.cs5 div:nth-child(odd){padding-left:0;border-left:0}.cs5 div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16);padding-top:18px}
/* 탭을 바꿔도 판 높이가 그대로 — 판을 한 칸에 겹쳐 두고 가장 큰 판 높이를 씀 */
.fps{display:grid}.fps>.fp{grid-area:1/1}.fps>.fp[hidden]{display:grid;visibility:hidden;pointer-events:none}
@media(max-width:720px){.fps>.fp[hidden]{display:none}}
/* 10-19 아래 칸도 첫 화면과 같은 폭 — 1296 상자를 풀고 좌우 여백을 첫 화면(3vw)과 맞춤 */
.wrap,.nav,.in{max-width:none;padding-left:clamp(20px,3vw,60px);padding-right:clamp(20px,3vw,60px)}
/* 칸은 넓어져도 글줄은 읽히는 길이까지 — 한 줄 40자 안팎 */
.wrap p,.wrap ul.do,.wrap ol.tl,.wrap ol.tl2,.wrap dd ul{max-width:40em}
/* 10-19 지수님 그림: 로고는 왼쪽 위 모서리 쪽 · 메뉴 줄은 그대로(다섯 쪽 같은 머리) */
@media(min-width:721px){
  .nav .logo{position:absolute;left:clamp(14px,1vw,24px);top:clamp(12px,1vw,20px);margin:0}
  .nav{justify-content:flex-end}
}
/* 10-19 지수님 F′ — 머리 줄(로고 · 메뉴 · 단추)을 명함 글꼴로 */
.nav .logo{font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:700;letter-spacing:-.01em}
.nav .logo small{font-weight:500;letter-spacing:.16em}
.nav .menu,.nav .pill{font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:500;letter-spacing:-.01em}

/* 10-21 하위 쪽 머리 — 메인 첫 화면 결을 줄인 판: 연한 기울임 영문 + 한글 제목 겹침 + 숫자 줄 (지수님 「쪽 머리 다시 맞춰서」) */
.sh{position:relative;background:var(--paper);overflow:hidden;border-bottom:1px solid var(--rule)}
.sh .in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:end;padding-top:clamp(40px,7vh,84px);padding-bottom:clamp(40px,6vh,72px)}
.sh .stage{container-type:inline-size;min-width:0}
.sh .crumb{font-size:13.5px;color:var(--muted);position:relative;z-index:2}
.sh .crumb a{color:var(--brand);font-weight:700}
.sh .bgw{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:min(19cqw,190px);line-height:1;letter-spacing:-.03em;color:#DCD1E6;white-space:nowrap;margin:.08em 0 0 -.04em;user-select:none}
.sh h1{position:relative;z-index:2;margin-top:-.62em;font-size:clamp(34px,min(6.4cqw,7.4vh),76px);line-height:1.18;letter-spacing:-.055em;font-weight:800}
.sh h1 em{font-style:normal;color:var(--brand)}
.sh h1 em:after{display:none}
.sh .lead{position:relative;z-index:2;margin-top:clamp(14px,2vh,24px);max-width:36em;font-size:clamp(15.5px,1.15vw,18px)}
.sh .nums{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));margin-top:clamp(24px,4vh,44px);border-top:1.5px solid var(--ink);max-width:640px}
.sh .nums div{padding:16px 14px 0 0}
.sh .nums div+div{padding-left:16px;border-left:1px solid var(--rule)}
.sh .nums b{display:block;font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:700;font-size:clamp(26px,2.3vw,38px);line-height:1.05;letter-spacing:-.04em;color:var(--brand);white-space:nowrap}
.sh .nums b small{font-family:Pretendard,sans-serif;font-weight:800;font-size:.55em;margin-left:2px}
.sh .nums span{display:block;margin-top:6px;font-size:13.5px;font-weight:700;line-height:1.45}
.sh .cta{display:flex;align-items:center;gap:22px;margin-top:clamp(22px,3.4vh,36px);position:relative;z-index:2}
.sh .cta .more{font-weight:700;font-size:15px;color:var(--ink);border-bottom:1.5px solid currentColor;padding-bottom:2px}
.sh .side{position:relative;z-index:2;min-width:0}
@media(max-width:900px){.sh .in{grid-template-columns:minmax(0,1fr);align-items:start}}
@media(max-width:720px){
  .sh .in{padding-top:28px;padding-bottom:40px}
  .sh .bgw{font-size:22cqw}
  .sh h1{font-size:clamp(30px,9.4cqw,40px);margin-top:-.48em}
  .sh .nums{grid-template-columns:minmax(0,1fr)}
  .sh .nums div,.sh .nums div+div{display:grid;grid-template-columns:110px minmax(0,1fr);column-gap:12px;align-items:baseline;padding:12px 0;border-left:0}
  .sh .nums div+div{border-top:1px solid var(--rule)}
  .sh .nums span{margin-top:0;font-size:14.5px}
}
@media (prefers-reduced-motion:no-preference){
  .sh .bgw{animation:dG 1.1s cubic-bezier(.16,1,.3,1) both}
  .sh h1{animation:dU .9s .25s cubic-bezier(.16,1,.3,1) both}
  .sh .lead,.sh .nums,.sh .cta,.sh .side{animation:dU .9s .45s cubic-bezier(.16,1,.3,1) both}
}
@keyframes dG{from{opacity:0;transform:translateY(24%)}to{opacity:1;transform:none}}
@keyframes dU{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* AI 솔루션 — 머리 오른쪽: AI 가 먼저 알린 것 → 사람이 판단 */
.alertS{background:#141117;color:#E9E5F0;border-radius:22px;padding:20px;box-shadow:0 30px 70px rgba(67,17,104,.22)}
.alertS h4{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:#B79AE0;letter-spacing:.02em}
.alertS h4 small{font-weight:500;color:#8C8596}
.alertS ul{list-style:none;margin-top:12px;display:grid;gap:8px}
.alertS li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;font-size:14px;line-height:1.45}
.alertS li small{display:block;margin-top:3px;font-size:12.5px;color:#A49DAF}
.alertS .ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;font-weight:800;font-size:14px}
.alertS .r{background:rgba(255,95,87,.16);color:#FF8A84}.alertS .y{background:rgba(254,188,46,.16);color:#FECB5B}.alertS .g{background:rgba(94,219,143,.16);color:#7FE3A6}
.alertS .me{margin-top:10px;display:flex;align-items:center;gap:10px;background:linear-gradient(160deg,#4a1a72,#2a0f42);border-radius:14px;padding:12px 14px;font-size:14px;font-weight:700;color:#fff}
.alertS .me i{font-style:normal;font-size:12px;font-weight:700;color:#D5C6F2;border:1px solid rgba(213,198,242,.5);border-radius:999px;padding:1px 9px}

/* 무엇을 드리나 — 칸마다 AI 가 하는 일 / 사람이 하는 일 */
.give{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:48px}
.give>div{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 22px;display:flex;flex-direction:column}
.give h3{font-size:20px;font-weight:800;letter-spacing:-.03em}
.give .d{margin-top:8px;font-size:14.5px;color:var(--muted);line-height:1.6;flex:1}
.give dl{margin-top:18px;border-top:1px solid var(--line);font-size:14px;line-height:1.5}
.give dl div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:10px 0 0}
.give dt{font-family:'Gmarket Sans',Pretendard,sans-serif;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted);padding-top:2px}
.give dd{color:var(--ink)}
.give .hu dt{color:var(--brand)}.give .hu dd{font-weight:700}

/* 하루 흐름 — 끝은 늘 사람 */
.day{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:48px;border-top:1.5px solid var(--ink)}
.day li{position:relative;padding:22px 18px 0 0}
.day li+li{padding-left:18px;border-left:1px solid var(--rule)}
.day b{display:inline-block;font-family:'Gmarket Sans',Pretendard,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:2px 10px;background:var(--panel);color:var(--muted)}
.day li.hu b{background:var(--brand);color:#fff}
.day h3{margin-top:12px;font-size:18px;font-weight:800;letter-spacing:-.03em}
.day p{margin-top:6px;font-size:14.5px;color:var(--muted);line-height:1.6}
.day small{display:block;margin-top:10px;font-size:12.5px;font-weight:700;color:var(--muted)}
.day li.hu small{color:var(--brand)}

/* 대시보드 쪽지 — 이 칸으로 무엇을 판단하나 */
.dnote{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.dnote div{border-top:1.5px solid #B79AE0;padding-top:14px;font-size:14.5px;color:#BDB6C9;line-height:1.6}
.dnote b{display:block;color:#fff;font-size:15.5px;margin-bottom:4px}

/* 도입 방법 셋 */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:48px}
.ways>div{border-radius:20px;padding:26px 24px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.ways .n{font-family:'Gmarket Sans',Pretendard,sans-serif;font-size:13px;font-weight:700;color:var(--brand);letter-spacing:.06em}
.ways h3{margin-top:10px;font-size:22px;font-weight:800;letter-spacing:-.035em}
.ways .for{margin-top:6px;font-size:14.5px;color:var(--muted)}
.ways ul{list-style:none;margin-top:16px;border-top:1px solid var(--line);font-size:14.5px;flex:1}
.ways li{padding:9px 0 9px 18px;border-bottom:1px solid var(--line);position:relative}
.ways li:before{content:"";position:absolute;left:2px;top:17px;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.ways .go2{margin-top:20px;align-self:flex-start}
.ways .pick{background:var(--brand);border-color:var(--brand);color:#fff}
.ways .pick .n,.ways .pick .for{color:#D5C6F2}
.ways .pick ul,.ways .pick li{border-color:rgba(255,255,255,.18)}.ways .pick li:before{background:#D5C6F2}
.ways .pick .go2{color:#fff}
.ways .fine{grid-column:1/-1;font-size:13.5px;color:var(--muted)}
@media(max-width:1100px){.give{grid-template-columns:repeat(2,minmax(0,1fr))}.day{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:24px}.day li:nth-child(4){padding-left:0;border-left:0}}
@media(max-width:720px){
  .give,.ways,.dnote{grid-template-columns:minmax(0,1fr)}
  .give{margin-top:32px}.ways{margin-top:32px}
  .day{grid-template-columns:minmax(0,1fr);margin-top:32px}
  .day li,.day li+li{padding:18px 0;border-left:0}.day li+li{border-top:1px solid var(--rule)}
}

/* 10-21 회사 소개 — 두 시선 · 일하는 방식 띠 · 분야별 로고 · 뿌리 연표(가로) */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:48px}
.two>div{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px 30px 28px}
.two .k{font-family:'Instrument Serif',serif;font-style:italic;font-size:30px;line-height:1;color:#B79AE0}
.two h3{margin-top:10px;font-size:24px;font-weight:800;letter-spacing:-.035em}
.two p{margin-top:10px;font-size:15.5px;color:var(--muted);line-height:1.7}
.two ul{list-style:none;margin-top:18px;border-top:1px solid var(--line);font-size:15px;font-weight:700}
.two li{padding:10px 0;border-bottom:1px solid var(--line)}
.two .dk{background:var(--ink);border-color:var(--ink);color:#fff}
.two .dk p{color:#C9C4D2}.two .dk ul,.two .dk li{border-color:rgba(255,255,255,.16)}
.two .sum{grid-column:1/-1;margin-top:18px;font-size:clamp(18px,1.5vw,22px);font-weight:700;letter-spacing:-.03em;max-width:none}
.two .sum b{color:var(--brand)}
.wayAI{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:32px;background:linear-gradient(120deg,#2a0f42,#431168);color:#fff;border-radius:24px;padding:34px 40px}
.wayAI .k{font-size:14px;font-weight:700;color:#D5C6F2}
.wayAI b{font-size:clamp(22px,2.2vw,32px);font-weight:800;letter-spacing:-.04em;line-height:1.3}
.wayAI .go{font-weight:700;color:#fff;border-bottom:1.5px solid #fff;padding-bottom:2px;white-space:nowrap}
.wayAI:hover{filter:brightness(1.08)}
.lgg{display:grid;grid-template-columns:1.6fr 1.3fr .8fr .8fr;gap:12px;margin-top:48px}
.lgg>div{border-top:1.5px solid #D5C6F2;padding-top:16px}
.lgg h3{font-size:16px;font-weight:800;color:#D5C6F2}
.lgg .lgs{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:20px}
.lgg .lgs img{display:block;height:calc(var(--h) * .8);width:auto;max-width:110px}
.root{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:48px;position:relative}
.root:before{content:"";position:absolute;left:0;right:0;top:7px;height:1.5px;background:var(--rule)}
.root li{position:relative;padding:30px 16px 0 0}
.root li:before{content:"";position:absolute;left:0;top:1px;width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--brand)}
.root li.now:before{background:var(--brand)}
.root b{font-family:'Gmarket Sans',Pretendard,sans-serif;font-size:14px;color:var(--brand)}
.root h3{margin-top:6px;font-size:18px;font-weight:800;letter-spacing:-.03em}
.root p{margin-top:4px;font-size:14.5px;color:var(--muted);line-height:1.55}
.root+.badges{max-width:860px;margin-top:44px}
@media(max-width:1100px){.lgg{grid-template-columns:1fr 1fr;row-gap:32px}.root{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}.root:before{display:none}}
@media(max-width:720px){
  .two{grid-template-columns:minmax(0,1fr);margin-top:32px}.two>div{padding:24px 22px}
  .wayAI{grid-template-columns:minmax(0,1fr);gap:12px;padding:26px 24px}
  .lgg{grid-template-columns:minmax(0,1fr);margin-top:32px}
  .root{grid-template-columns:minmax(0,1fr);border-left:1.5px solid var(--rule);margin-top:32px;row-gap:0}
  .root li{padding:0 0 24px 26px}.root li:before{left:-6px;top:5px}
}

/* 10-21 하위 쪽 머리 — 오른쪽 칸이 없으면 한 칸으로 */
.sh .in:not(:has(> .side)){grid-template-columns:minmax(0,1fr)}
.sh .in:not(:has(> .side)) .lead{max-width:40em}
/* 광고 서비스 — 머리 오른쪽 단계 바로 가기 · 펼친 퍼널 · 시작하는 법 띠 */
.stj{display:grid;gap:6px}
.stj a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:4px 12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 18px}
.stj a:nth-child(1){margin-right:0}.stj a:nth-child(2){margin-right:6%}.stj a:nth-child(3){margin-right:12%}.stj a:nth-child(4){margin-right:18%}
.stj i{font-style:normal;font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:700;font-size:13px;color:var(--brand)}
.stj b{font-size:18px;font-weight:800;letter-spacing:-.03em}
.stj small{grid-column:2;font-size:13.5px;color:var(--muted)}
.stj a:after{content:"↓";grid-column:3;grid-row:1/3;color:var(--brand);font-weight:800}
.stj a:hover{border-color:var(--brand)}
.fpo{display:grid;gap:16px}
.fpo .fp{min-height:0;scroll-margin-top:24px}
.startS{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:20px;border-top:1.5px solid var(--ink)}
.startS li{padding:16px 12px 0 0;font-size:17px;font-weight:800;letter-spacing:-.03em;position:relative}
.startS li+li{padding-left:16px;border-left:1px solid var(--rule)}
.startS b{display:block;font-family:'Gmarket Sans',Pretendard,sans-serif;font-size:13px;color:var(--brand);margin-bottom:4px}
@media(max-width:720px){
  .stj a:nth-child(n){margin-right:0}
  .startS{grid-template-columns:1fr 1fr;row-gap:14px}.startS li:nth-child(odd){padding-left:0;border-left:0}
}
/* 10-21 운영 사례 — 거르기 두 줄 · 카드 단계 딱지 */
.sec .chipsF{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 28px}
.chipsF .lb{font-size:13px;font-weight:700;color:var(--muted);margin:0 2px 0 10px}
.chipsF .lb:first-child{margin-left:0}
.stg{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:700;color:var(--brand);border-bottom:1.5px solid currentColor;padding-bottom:1px}
@media(max-width:720px){.chipsF .lb{flex-basis:100%;margin:6px 0 0}}
/* 10-21 문의 폼 — 768 폭에서 칸이 88px 넘치던 것(전부터) · 칸이 줄어들 수 있게 */
.form form{grid-template-columns:repeat(2,minmax(0,1fr))}
.form input,.form select,.form textarea{min-width:0;width:100%}
@media(max-width:900px){.form{grid-template-columns:minmax(0,1fr);gap:28px}}
/* 10-21 밤 하위 쪽 머리 A — 지수님 「A! 이쁘다잉」: 메인 결 가운데 · 기울임 영문은 제목 뒤 넓게 · 그 쪽 물건은 아래 가운데 · 숫자는 머리 맨 아래 흰 띠 (위 「10-21 하위 쪽 머리」 묶음을 덮음) */
.sh .in{display:block;text-align:center;padding-top:clamp(28px,5vh,56px);padding-bottom:0}
.sh .stage{container-type:inline-size;max-width:1100px;margin:0 auto}
.sh .crumb{display:inline-block}
.sh .bgw{font-size:calc(min(15cqw,176px) * var(--k,1));color:#E2D8EA;margin:.02em 0 0;letter-spacing:-.035em}
.sh h1{margin-top:-.78em;font-size:clamp(36px,min(6.2cqw,8vh),72px);line-height:1.16}
.sh .lead{margin:clamp(14px,2.2vh,22px) auto 0;max-width:34em;text-wrap:balance;color:var(--muted)}
.sh .cta{justify-content:center}
.sh .side{max-width:760px;margin:clamp(28px,4.4vh,44px) auto 0;text-align:left}
.sh .side:has(.alertS){max-width:1000px}
.sh .alertS{margin:0 auto}
.sh .alertS ul{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.sh .alertS ul{grid-template-columns:minmax(0,1fr)}}
/* 광고 서비스: 네 단계를 오르는 계단으로(메인 계단 그림과 같은 뜻) */
.sh .stj{grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:10px}
.sh .stj a{grid-template-columns:minmax(0,1fr) auto;padding:16px 16px 18px;margin:0!important;align-content:start}
.sh .stj a:nth-child(1){min-height:104px}.sh .stj a:nth-child(2){min-height:124px}.sh .stj a:nth-child(3){min-height:144px}
.sh .stj a:nth-child(4){min-height:164px;background:var(--brand);border-color:var(--brand);color:#fff}
.sh .stj a:nth-child(4) i,.sh .stj a:nth-child(4) small,.sh .stj a:nth-child(4):after{color:#fff}
.sh .stj i{grid-column:1}.sh .stj b{grid-column:1}.sh .stj small{grid-column:1/3}
.sh .stj a:after{grid-column:2;grid-row:1}
/* 숫자 띠 — 머리와 본문을 가르는 흰 줄 */
.sh .nums{max-width:none;margin:clamp(36px,5.6vh,60px) 0 0;padding:0;box-shadow:0 0 0 100vmax #fff,0 -1px 0 100vmax var(--line);clip-path:inset(-1px -100vmax 0);grid-template-columns:repeat(var(--n,3),minmax(0,1fr));background:#fff;border-top:1px solid var(--line)}
.sh .nums div,.sh .nums div+div{padding:22px 16px 24px;text-align:center}
.sh .nums div+div{border-left:1px solid var(--line)}
.sh .nums b{font-size:clamp(28px,2.4vw,40px)}
.sh .nums span{font-weight:600;color:var(--muted)}
@media(max-width:900px){
  .sh .stj{grid-template-columns:1fr 1fr}
  .sh .stj{align-items:stretch}
  .sh .stj a:nth-child(n){min-height:0}
}
@media(max-width:720px){
  .sh .in{padding-top:22px}
  .sh .bgw{font-size:calc(21cqw * var(--k,1))}
  .sh h1{margin-top:-.56em;font-size:clamp(30px,9.4cqw,40px)}
  .sh .cta{flex-direction:column;gap:14px}
  .sh .nums{grid-template-columns:minmax(0,1fr)}
  .sh .nums div,.sh .nums div+div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0;text-align:left;border-left:0}
  .sh .nums div+div{border-top:1px solid var(--line)}
  .sh .nums span{text-align:right}
}
/* 긴 영문(회사 소개 Over the agency)은 폰에서 조금 작게 — 오른쪽 잘림 0 */
@media(max-width:720px){.sh .bgw.lg{font-size:17.5cqw}}
/* AI 솔루션 설명 줄바꿈은 PC 만 — 폰은 흐르게 */
@media(max-width:720px){.sh .lead br.pc{display:none}}
/* 10-21 밤 맨 위 줄 — 지수님 「디자인적으로 제일 훌륭해 보이는 걸로 · 줄 맞춤」: 로고 · 메뉴 · 단추를 한 줄 가운데 선에 · 양 끝을 아래 본문 칸 여백(3vw · 위 597줄)과 맞춤 (위 10-19 「로고 왼쪽 위 모서리」 줄을 덮음) */
@media(min-width:721px){
  .nav{padding-top:24px;padding-bottom:24px;justify-content:flex-start;align-items:center;gap:0}
  .nav .logo{position:static;margin:0 auto 0 0;align-items:center;gap:12px;font-size:22px;line-height:1}
  .nav .logo small{font-size:11px;line-height:1;padding-left:12px;border-left:1px solid var(--rule)}
  .nav .menu{gap:clamp(22px,2.6vw,40px);margin-right:clamp(24px,3vw,44px);line-height:1}
  .nav .menu a{position:relative;padding:10px 0}
  .nav .menu a.on{color:var(--brand);font-weight:700}
  .nav .menu a.on:after{content:"";position:absolute;left:50%;bottom:0;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--brand)}
}
@media(min-width:721px) and (max-width:1100px){.nav .logo small{display:none}}
/* 10-21 밤 폰 머리 강약 — 지수님 「강약이 너무 없어」: 제목은 굵게 크게 · 설명은 작고 옅게 · 숫자는 세 칸 가로로 크게, 이름은 작게 */
@media(max-width:720px){
  .sh .bgw{color:#D9CAE7}
  .sh h1{font-size:clamp(31px,10cqw,42px)}
  .sh .lead{max-width:24em;font-size:14.5px;line-height:1.65;color:#6A6770}
  .sh .nums{grid-template-columns:repeat(var(--n,3),minmax(0,1fr));margin-top:32px}
  .sh .nums div,.sh .nums div+div{display:block;padding:20px 6px 22px;text-align:center;border-top:0}
  .sh .nums div+div{border-left:1px solid var(--line)}
  .sh .nums b{font-size:clamp(24px,7.4vw,30px)}
  .sh .nums b small{font-size:.5em}
  .sh .nums span{margin-top:8px;text-align:center;font-size:12px;font-weight:500;line-height:1.45;color:var(--muted)}
}
/* 10-21 밤 회사 소개 딱지 — ①뿌리 칸을 머리 아래로 · 머리말 가운데(머리에서 이어지게) ④두 카드 작은 목록은 옅게 → 아래 굵은 「그래서」 줄이 보이게 */
.rootS .eb{justify-content:center}
.rootS .h2{text-align:center}
.rootS .root{margin-top:56px}
.two ul{font-weight:500;color:#8C8992}
.two .dk ul{color:rgba(255,255,255,.5)}
@media(max-width:720px){.rootS .root{margin-top:36px}}
/* 10-21 밤 하위 쪽 머리 다듬기 — 지수님 그림(AI 솔루션): 「메인 텍스트에 힘이 실리게 · 여백이 더 살게 · 위치 조금 위로 · 단추와 하단 설명글 조금 작게」 */
@media(min-width:721px){
  .sh .in{padding-top:clamp(12px,2.4vh,32px)}
  .sh h1{font-size:clamp(40px,min(6.6cqw,8.4vh),78px);letter-spacing:-.06em}
  .sh .lead{margin-top:clamp(22px,3.4vh,36px);font-size:15px;line-height:1.75}
  .sh .cta{margin-top:clamp(48px,8vh,88px);gap:22px}
  .sh .cta .pill{height:50px;font-size:15px;padding-left:22px}
  .sh .cta .pill i{width:38px;height:38px}
  .sh .cta .more{font-size:14px}
}
.rootS .eb{width:max-content;margin-left:auto;margin-right:auto}
/* 10-21 밤 회사 소개 이력 띠 — 머리 숫자 띠 바로 아래 · 2008 → NOW 가 옆으로 흐름(마우스를 올리면 멈춤 · 움직임 줄이기 설정이면 멈춘 한 줄) · 머리말 뺌 · 제목 작게 */
.rootS{padding:clamp(48px,7vh,80px) 0 clamp(8px,2vh,24px);overflow:hidden}
.rootS .rt{text-align:center;font-size:clamp(20px,1.6vw,24px);font-weight:800;letter-spacing:-.035em}
.rootS .rt em{font-style:normal;color:var(--brand)}
.rband{display:flex;width:max-content;margin-top:clamp(28px,4vh,40px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rband{width:100%}
.rtrack{list-style:none;display:flex;flex:none;animation:rflow 38s linear infinite}
.rband:hover .rtrack{animation-play-state:paused}
.rtrack li{position:relative;flex:none;width:clamp(240px,22vw,340px);padding:28px 24px 0 0}
.rtrack li:after{content:"";position:absolute;left:0;right:0;top:6px;height:1.5px;background:var(--rule)}
.rtrack li:before{content:"";position:absolute;z-index:1;left:0;top:1px;width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--brand)}
.rtrack li.now:before{background:var(--brand)}
.rtrack b{font-family:'Gmarket Sans',Pretendard,sans-serif;font-size:14px;color:var(--brand)}
.rtrack h3{margin-top:6px;font-size:18px;font-weight:800;letter-spacing:-.03em}
.rtrack p{margin-top:4px;font-size:14px;color:var(--muted);line-height:1.55;text-wrap:balance}
@keyframes rflow{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){
  .rband{-webkit-mask-image:none;mask-image:none;justify-content:center}
  .rtrack{animation:none;flex:1;max-width:1296px;margin:0 auto;padding:0 clamp(20px,3vw,60px)}
  .rtrack li{flex:1 1 0;width:auto}
  .rtrack[aria-hidden]{display:none}
}
@media(max-width:720px){.rtrack li{width:220px}.rtrack h3{font-size:16.5px}.rtrack p{font-size:13px}}
/* 10-21 밤 단추 · 오른쪽 물건이 없는 머리(회사 소개 · 운영 사례) — 지수님 「위에 여백이 좀 더 · 여기만 세로 폭이 좁아 보여」: 위아래를 다른 쪽 높이에 가깝게 */
@media(min-width:721px){
  .sh .in:not(:has(> .side)):not(:has(.cta)) .bgw{margin-top:calc(.02em + clamp(28px,5vh,64px))}
  .sh .in:not(:has(> .side)):not(:has(.cta)) .nums{margin-top:clamp(64px,10vh,112px)}
}
/* 10-21 밤 AI 솔루션 이름 「손끝」 · 맞춤 제작 「손끝 맞춤」(지수님 「손끝+손끝맞춤 좋아」) — 도입 방법 카드 제목 옆 이름표 */
.ways h3 .nm{display:inline-block;margin-left:10px;padding:3px 11px;border-radius:999px;background:var(--tint);color:var(--brand);font-size:13px;font-weight:800;letter-spacing:-.01em;vertical-align:.2em;white-space:nowrap}
/* 10-21 밤 회사 소개 「두 시선」 제목 — 지수님 「에이전시답게 약간의 재미 · 보라 바탕에 흰 글씨로 위와 다르게」: 형광펜 띠처럼 살짝 기울인 보라 띠 · 올리면 바로 섬 */
.h2 em.mk{display:inline-block;color:#fff;background:var(--brand);padding:.02em .26em .08em;margin-left:.06em;border-radius:.12em;transform:rotate(-1.8deg);transform-origin:left center;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.h2 em.mk:hover{transform:rotate(0)}
@media (prefers-reduced-motion:reduce){.h2 em.mk{transition:none}}
/* 10-21 밤 AI 솔루션 설명 — 폰만 짧은 글 두 줄(지수님 「모바일만 더 줄이자」) */
.sh .lead .t-mo{display:none}
@media(max-width:720px){.sh .lead .t-pc{display:none}.sh .lead .t-mo{display:inline}.sh .lead:has(.t-mo){max-width:none}}
/* 10-21 밤 AI 솔루션 이름 — 지수님 「AI솔루션 [손끝 · 손끝맞춤] 으로 이름 보이게」: 쪽 이름 옆 이름표 둘 */
.sh .crumb .nmS{display:inline-flex;gap:6px;margin-left:10px;vertical-align:1px}
.sh .crumb .nmS b{padding:3px 11px;border-radius:999px;background:var(--brand);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:-.01em;line-height:1.4}
.sh .crumb .nmS b+b{background:#fff;color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}

/* 10-21 밤 광고 서비스 네 단계 오른쪽 칸 — 지수님 딱지 셋(「왼쪽이랑 우측이 안맞아 · 01~04에 맞게 · 그래프 새로 · 모션 그래픽 · 우리 세일즈가 잘되게」): 왼쪽 글이 말하는 일을 오른쪽 그림이 그대로 보여 줌 · 칸이 화면에 들어오면 한 번 움직임 */
.vz{background:var(--paper);border-radius:20px;padding:26px 28px 24px;min-width:0}
.vz .vh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:15px;font-weight:800;letter-spacing:-.02em}
.vz .vh small{font-size:12.5px;font-weight:500;color:var(--muted)}
.vz .vh+*{margin-top:14px}
.vz svg{display:block;width:100%;height:auto;overflow:visible}
.vz svg text{font-family:Pretendard,sans-serif}
.vz .gd line,.vz line.gd{stroke:var(--rule);stroke-width:1;stroke-dasharray:3 5}
.vz .sub{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.vz .sub .lgs img{height:var(--h)}
.vz .mn{display:flex;gap:22px}
.vz .mn span{display:flex;align-items:baseline;gap:6px;font-size:13px;font-weight:700;color:var(--muted)}
.vz .mn b{font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:700;font-size:28px;letter-spacing:-.04em;color:var(--brand);line-height:1}
.vz .mn b small{font-family:Pretendard,sans-serif;font-weight:800;font-size:.5em;margin-left:1px}
.vz .cap{margin-top:12px;font-size:13px;color:var(--muted);line-height:1.6}
/* 01 선 */
.vz1 .ar{fill:rgba(67,17,104,.08)}
.vz1 .li{fill:none;stroke:var(--brand);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0}
.vz1 .pt{fill:#fff;stroke:var(--brand);stroke-width:3}
.vz1 .pt.p2{fill:var(--brand)}
.vz1 .v{font-size:15px;font-weight:800;fill:var(--ink)}.vz1 .v.big{font-size:22px;fill:var(--brand)}
.vz1 .u{font-size:13px;font-weight:800;fill:#7A3FB0}
.vz1 .k{font-size:13px;font-weight:600;fill:var(--muted)}
/* 02 막대 */
.vz2 .br{fill:#CDBEDC;transform-box:fill-box;transform-origin:bottom}
.vz2 .br.hi{fill:var(--brand)}
.vz2 .aw line{stroke:var(--brand);stroke-width:3}.vz2 .aw path{fill:var(--brand)}
.vz2 .aw text{font-size:14px;font-weight:800;fill:var(--brand)}
.vz2 .seo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;margin-top:16px;background:#fff;border-radius:14px;padding:14px 18px}
.vz2 .seo .lgs img{height:var(--h)}
.vz2 .sb{display:grid;gap:6px}
.vz2 .sb span{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted)}
.vz2 .sb i{display:block;height:10px;border-radius:5px;background:#CDBEDC;width:16%}
.vz2 .sb .b1 i{background:var(--brand);width:100%;transform-origin:left}
.vz2 .seo p{font-size:12.5px;font-weight:600;color:var(--muted);text-align:right;line-height:1.4}
.vz2 .seo p b{display:block;font-family:'Gmarket Sans',Pretendard,sans-serif;font-size:30px;color:var(--brand);letter-spacing:-.04em;line-height:1}
.vz2 .seo p b small{font-size:.5em;font-family:Pretendard,sans-serif;font-weight:800}
/* 03 사이트 틀 */
.vz3{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:22px;align-items:start}
.vz3 .sites{position:relative;padding-bottom:6px}
.vz3 .bw{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 18px 40px rgba(26,24,24,.14);border:1px solid var(--line)}
.vz3 .bw .tb{display:flex;align-items:center;gap:5px;height:24px;padding:0 10px;background:#ECEAEE;font-size:11px;color:var(--muted)}
.vz3 .bw .tb i{width:7px;height:7px;border-radius:50%;background:#C9C5CE}
.vz3 .bw .tb span{margin-left:8px;background:#fff;border-radius:6px;padding:1px 10px}
.vz3 .bw img{display:block;width:100%;height:auto}
.vz3 .w2{width:66%;margin:-22% 0 0 auto;position:relative}
.vz3 .cap b{color:var(--ink);font-weight:800;margin-right:6px}
.vz3 .pls{display:grid;gap:12px;justify-items:center}
.vz3 .pls figure{width:100%}
.vz3 .pls .fr{border-radius:16px;border:5px solid var(--ink);overflow:hidden;background:#fff;aspect-ratio:9/17}
.vz3 .pls .fr img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.vz3 .pls figcaption{margin-top:6px;text-align:center;font-size:12px;font-weight:700}
.vz3 .pls .pt{font-size:12px;font-weight:700;color:var(--brand);text-align:center}
/* 04 랜딩 + 트래킹 */
.vz4 .lp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto repeat(2,minmax(0,1fr));align-items:center;gap:10px}
.vz4 .lp{grid-template-columns:minmax(0,.9fr) 18px minmax(0,.9fr) minmax(0,.9fr) minmax(0,1.1fr)}
.vz4 .lp figure img{display:block;width:100%;aspect-ratio:3/5;object-fit:cover;object-position:top;border-radius:8px;border:1px solid var(--line)}
.vz4 .lp figcaption{margin-top:5px;text-align:center;font-size:11.5px;font-weight:700;color:var(--muted)}
.vz4 .lp .to{font-style:normal;color:var(--brand);font-weight:800;text-align:center}
.vz4 .cv{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:8px;height:100%;padding-left:6px}
.vz4 .cv span{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:120px;font-size:11.5px;font-weight:700;color:var(--muted)}
.vz4 .cv i{display:block;width:70%;border-radius:6px 6px 0 0;background:#CDBEDC;height:62%;transform-origin:bottom}
.vz4 .cv .c1 i{background:var(--brand);height:74%}
.vz4 .cv b{order:-1;font-family:'Gmarket Sans',Pretendard,sans-serif;font-size:14px;color:var(--ink)}
.vz4 .cv .c1 b{color:var(--brand)}
.vz4 .cv p{grid-column:1/-1;text-align:center;font-size:12px;font-weight:700;color:var(--muted)}
.vz4 .cv p b{font-size:15px;color:var(--brand)}
.vz4 .vh:nth-of-type(2){margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.vz4 .tk .ph{fill:#fff;stroke:var(--ink);stroke-width:4}
.vz4 .tk .evt rect{fill:var(--tint)}
.vz4 .tk .evt text{font-size:12px;font-weight:700;fill:var(--brand)}
.vz4 .tk .rt{fill:none;stroke:#CDBEDC;stroke-width:1.6;stroke-dasharray:4 5}
.vz4 .tk .dt{fill:var(--brand);offset-rotate:0deg;offset-distance:100%;opacity:0}
.vz4 .tk .hb{fill:var(--brand)}
.vz4 .tk .hbt{font-size:13px;font-weight:800;fill:#fff}.vz4 .tk .hbs{font-size:10px;font-weight:600;fill:#D5C6F2}
.vz4 .tk .aud rect{fill:#fff;stroke:var(--brand);stroke-width:1.5}
.vz4 .tk .aud text{font-size:12px;font-weight:700;fill:var(--ink)}
/* 움직임 — 칸이 화면에 들어오면(.fp.on) 한 번 · 트래킹 점만 계속 흐름 */
@media (prefers-reduced-motion:no-preference){
  .fp:not(.on) .vz1 .li{stroke-dashoffset:100}
  .fp.on .vz1 .li{animation:vzDraw 1.6s .2s cubic-bezier(.4,0,.2,1) both}
  .fp.on .vz1 .ar{animation:vzFade 1s 1.2s both}
  .fp.on .vz1 .pt,.fp.on .vz1 .lb{animation:vzPop .5s both}
  .fp.on .vz1 .p0,.fp.on .vz1 .l0{animation-delay:.2s}.fp.on .vz1 .p1,.fp.on .vz1 .l1{animation-delay:.9s}.fp.on .vz1 .p2,.fp.on .vz1 .l2{animation-delay:1.6s}
  .fp.on .vz2 .br{animation:vzRise .7s calc(var(--i) * 55ms + .2s) cubic-bezier(.2,.7,.2,1) both}
  .fp.on .vz2 .aw{animation:vzUp .7s 1.3s cubic-bezier(.2,.7,.2,1) both}
  .fp.on .vz2 .sb .b1 i{animation:vzGrowX 1.1s 1.1s cubic-bezier(.2,.7,.2,1) both}
  .fp.on .vz3 .w1{animation:vzUp .8s .15s cubic-bezier(.2,.7,.2,1) both}
  .fp.on .vz3 .w2{animation:vzUp .8s .45s cubic-bezier(.2,.7,.2,1) both}
  .fp.on .vz3 .pls figure{animation:vzUp .7s .8s cubic-bezier(.2,.7,.2,1) both}
  .fp.on .vz4 .cv i{animation:vzRise .8s .6s cubic-bezier(.2,.7,.2,1) both}
  .fp.on .vz4 .cv .c1 i{animation-delay:.9s}
  .fp.on .vz4 .evt{animation:vzPop .45s calc(var(--i) * 160ms + .3s) both}
  .fp.on .vz4 .aud{animation:vzPop .45s calc(var(--i) * 160ms + 1.1s) both}
  .fp.on .vz4 .dt{animation:vzFlow 2.4s calc(var(--i) * .6s + 1s) linear infinite}
  .fp.on .vz4 .dt.o{animation-delay:calc(var(--i) * .8s + 2.2s)}
  .fp.on .vz4 .hb{animation:vzPulse 2.4s 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
}
@keyframes vzDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes vzFade{from{opacity:0}to{opacity:1}}
@keyframes vzPop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes vzRise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes vzGrowX{from{transform:scaleX(.16)}to{transform:scaleX(1)}}
@keyframes vzUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes vzFlow{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes vzPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media(max-width:1000px){.vz3{grid-template-columns:minmax(0,1fr) 112px}}
@media(max-width:720px){
  .vz{padding:18px 16px}
  .vz3{grid-template-columns:minmax(0,1fr)}
  .vz3 .pls{grid-template-columns:1fr 1fr;gap:10px 14px}.vz3 .pls figure{width:72%;justify-self:center}.vz3 .pls .pt{grid-column:1/-1}
  .vz4 .lp{grid-template-columns:repeat(3,minmax(0,1fr))}.vz4 .lp .to{display:none}.vz4 .cv{grid-column:1/-1;height:auto}.vz4 .cv span{height:96px}
  .vz2 .seo{grid-template-columns:minmax(0,1fr) auto}.vz2 .seo .sb{grid-column:1/-1;order:3}
  .vz .mn{gap:16px}.vz .mn b{font-size:24px}
}
.vz2 .sb span{white-space:nowrap}
.vz2 .sb i{flex:0 0 16%;width:auto}
.vz2 .sb .b1 i{flex:1 1 auto;width:auto}
/* 10-21 밤 회사 소개 「처음에 화면이 두 번 불러와」 — 첫 화면 안의 이력 띠가 머리 뒤에 따로 떠오르던 것: 머리 설명 글과 같은 때 한 번에 */
@media (prefers-reduced-motion:no-preference){.rootS .rt,.rootS .rband{animation:dU .9s .45s cubic-bezier(.16,1,.3,1) both}}
/* 10-21 밤 광고 서비스 머리 제목 움직임(시험 · 지수님 「처음 보는 순간 < 하고 없어지면서 다시 찾아올 때까지가 올라와서 … 남게」): 두 줄로 보였다가 윗줄이 왼쪽으로 빠지며 접히고 아랫줄만 남음 · 움직임 줄이기 설정이면 처음부터 아랫줄만 */
.sh h1.swap .s1,.sh h1.swap .s2{display:block}
.sh h1.swap .s1{overflow:hidden;max-height:1.3em}
@media (prefers-reduced-motion:no-preference){
  .sh h1.swap .s1{animation:swOut .8s 1.9s cubic-bezier(.5,0,.2,1) forwards}
}
@media (prefers-reduced-motion:reduce){.sh h1.swap .s1{display:none}}
@keyframes swOut{0%{opacity:1;transform:none;max-height:1.3em}45%{opacity:0;transform:translateX(-6%)}100%{opacity:0;transform:translateX(-6%);max-height:0}}
/* 10-21 밤 새 쪽 「사이트 제작」 — 만든 사이트 셋을 브라우저 틀 + 폰 틀로(벤치마크 4/8) · 만드는 과정 넷(3/8) · 쪽 안 의뢰 폼(3/8) · 가격은 안 적음(0/8) */
.bcs{display:grid;gap:28px;margin-top:48px}
.bcs .bc{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;background:#fff;border:1px solid var(--line);border-radius:26px;padding:clamp(24px,3vw,44px)}
.bcs .bc.rev{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}.bcs .bc.rev .sh2{order:2}
.bcs .bc .sh2{position:relative;padding:0 9% 6% 0}
.bcs .bc .bw{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 22px 50px rgba(26,24,24,.16);border:1px solid var(--line)}
.bcs .bc .bw .tb{display:flex;align-items:center;gap:5px;height:26px;padding:0 12px;background:#ECEAEE;font-size:11.5px;color:var(--muted)}
.bcs .bc .bw .tb i{width:8px;height:8px;border-radius:50%;background:#C9C5CE}
.bcs .bc .bw .tb span{margin-left:10px;background:#fff;border-radius:6px;padding:1px 12px}
.bcs .bc .bw img{display:block;width:100%;height:auto}
.bcs .bc .ph{position:absolute;right:0;bottom:0;width:24%;border-radius:18px;border:5px solid var(--ink);overflow:hidden;background:#fff;box-shadow:0 18px 40px rgba(26,24,24,.22)}
.bcs .bc .ph img{display:block;width:100%;aspect-ratio:390/700;object-fit:cover;object-position:top}
.bcs .bc .n{font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:700;font-size:14px;color:var(--brand)}
.bcs .bc h3{margin-top:8px;font-size:clamp(26px,2.4vw,34px);font-weight:800;letter-spacing:-.04em;line-height:1.2}
.bcs .bc h3 small{display:block;margin-top:6px;font-size:16px;font-weight:600;color:var(--muted);letter-spacing:-.02em}
.bcs .bc .tx>p{margin-top:12px;font-size:15px;color:var(--muted)}
.bcs .bc .tg{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.bcs .bc .tg li{font-size:13px;font-weight:700;background:var(--tint);color:var(--brand);border-radius:999px;padding:5px 12px}
.bcs .bc .go2{display:inline-block;margin-top:22px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:48px;position:relative}
.steps:before{content:"";position:absolute;left:0;right:0;top:7px;height:1.5px;background:var(--rule)}
.steps li{position:relative;padding:30px 20px 0 0}
.steps li:before{content:"";position:absolute;left:0;top:1px;width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--brand)}
.steps li.now:before{background:var(--brand)}
.steps b{font-family:'Gmarket Sans',Pretendard,sans-serif;font-size:14px;color:var(--brand)}
.steps h3{margin-top:6px;font-size:20px;font-weight:800;letter-spacing:-.03em}
.steps p{margin-top:6px;font-size:14.5px;color:var(--muted);line-height:1.6}
.kinds .pr{margin-top:auto;padding-top:18px;font-size:14px;font-weight:800;color:var(--brand)}
.kinds .pick .pr{color:#fff}
@media(max-width:1000px){.bcs .bc,.bcs .bc.rev{grid-template-columns:minmax(0,1fr)}.bcs .bc.rev .sh2{order:0}.steps{grid-template-columns:1fr 1fr;row-gap:28px}.steps:before{display:none}}
@media(max-width:720px){.bcs .bc{padding:20px;border-radius:20px}.bcs .bc .ph{width:28%;border-width:4px;border-radius:14px}.steps{grid-template-columns:minmax(0,1fr);border-left:1.5px solid var(--rule);row-gap:0}.steps li{padding:0 0 24px 26px}.steps li:before{left:-6px;top:5px}}
/* 사이트 제작으로 가는 길 — 맨 아래 줄 링크(다섯 쪽) · 광고 서비스 끝 띠 */
.foot .fl{margin-right:18px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.toSite{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:28px;padding:20px 26px;border-radius:18px;background:var(--tint);color:var(--ink)}
.toSite span{font-size:15px;color:var(--muted);font-weight:600}
.toSite b{font-size:16px;font-weight:800;color:var(--brand)}
.toSite:hover b{text-decoration:underline}
/* 10-21 밤 지수님 그림 — 02 그래프: 로고 · 6배를 위 한 줄로, 그래프는 칸 폭에 맞춰 크게 */
.vz2 .sub.top{margin-top:0;padding-top:0;border-top:0;padding-bottom:6px}
.vz2 .sub.top+svg{margin-top:10px}
/* 가격 — 「부터」 표기(지수님 10-21: 손끝 월 30만 · 손끝 맞춤 500만 · 한 쪽 50만 · 사이트 300만) */
.ways .prc{margin-top:8px;font-size:14px;font-weight:700;color:var(--muted)}
.ways .prc b{font-family:'Gmarket Sans',Pretendard,sans-serif;font-size:20px;color:var(--brand);letter-spacing:-.03em}
.ways .pick .prc{color:#D5C6F2}.ways .pick .prc b{color:#fff}
.kinds .pr b{font-family:'Gmarket Sans',Pretendard,sans-serif;font-size:22px;letter-spacing:-.03em}
/* 광고 서비스 제목 — 지수님 「처음 보는 순간부터가 서서히 사라지고 다시 찾아올 때까지가 그 위로 서서히 올라가게 · 약간 아련하게」: 옆으로 넘기지 않고 흐려지며 사라짐 → 아랫줄이 천천히 그 자리로 */
@media (prefers-reduced-motion:no-preference){
  .sh h1.swap .s1{animation:swFade 2.6s 1.8s cubic-bezier(.45,0,.25,1) forwards}
}
@keyframes swFade{0%{opacity:1;filter:blur(0);max-height:1.3em;transform:none}45%{opacity:0;filter:blur(6px);max-height:1.3em;transform:translateY(-.12em)}100%{opacity:0;filter:blur(6px);max-height:0;transform:translateY(-.12em)}}
/* 10-22 지수님 「텍스트 사라지는거 좋고 · 그 담에 올라가는 건 다시 찾아올 때까지 텍스트만 · 다른 거들이 같이 움직이지 말고 · 박스째로 뽀잉 말고 아련하게 없어지고 스무스하게 거길 차지하는」: 윗줄 자리를 접지 않음(아래 칸 그대로) · 윗줄은 흐려지며 사라지고 · 아랫줄 글자만 한 줄 위로 천천히 */
@media (prefers-reduced-motion:no-preference){
  .sh h1.swap .s1{max-height:none;animation:swGone 1.6s 1.8s cubic-bezier(.4,0,.2,1) forwards}
  .sh h1.swap .s2{animation:swTake 1.9s 2.5s cubic-bezier(.45,0,.15,1) forwards;will-change:transform}
}
@keyframes swGone{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(8px)}}
@keyframes swTake{from{transform:translateY(0)}to{transform:translateY(-1.16em)}}
.ways .prc small,.kinds .pr small{margin-left:8px;font-size:12px;font-weight:600;opacity:.75}
.form .sent{grid-column:1/-1;padding:40px 8px;text-align:center}
.form .sent b{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em;color:#fff}
.form .sent p{margin-top:10px;color:#C9C4D2}
/* 10-22 지수님 「이거는 모바일은 도입상담만 보이게」(AI 솔루션) — 폰에서 「도입 방법 보기」 · 아래 띠 「홈」 숨김 */
@media (max-width:720px){.mo-x{display:none!important}}
.vz4 .tkm{display:none;gap:10px;justify-items:center;margin-top:14px}
.vz4 .tkm ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.vz4 .tkm li{font-size:13px;font-weight:700;border-radius:8px;padding:6px 10px}
.vz4 .tkm .ev li{background:var(--tint);color:var(--brand)}
.vz4 .tkm .au li{background:#fff;border:1.5px solid var(--brand);border-radius:999px;color:var(--ink)}
.vz4 .tkm .hb{background:var(--brand);color:#fff;border-radius:999px;padding:8px 18px;font-size:14px;font-weight:800;text-align:center;line-height:1.2}
.vz4 .tkm .hb small{display:block;font-size:11.5px;font-weight:600;color:#D5C6F2}
.vz4 .tkm .ar{color:var(--brand);font-weight:800;line-height:1}
/* 10-22 폰 전체 점검(지수님 「모바일은 전체적으로 점검해봐줄래?」) — 대시보드 모형 표 오른쪽 칸 잘림 · AI 폼 고르는 칸 글자 잘림 · 광고 서비스 그래프 글자 작음 · 아래 줄 링크 누르기 어려움 */
@media (max-width:720px){
  .db .tbl th:nth-child(5),.db .tbl td:nth-child(5){display:none}
  .db table{min-width:0}.db th,.db td{padding-left:4px;padding-right:4px}.db td{font-size:13px}
  .vz1 .l1 .u{transform:translateY(-12px)}.vz1 .l2 .u{transform:translateY(-26px)}
  .vz4 svg.tk{display:none}
  .vz4 .tkm{display:grid!important}
  .form label.mfull{grid-column:1/-1}
  .foot .fl{display:inline-block;padding:12px 0;margin:-12px 18px -12px 0}
  .vz1 .v{font-size:24px}.vz1 .v.big{font-size:34px}.vz1 .u{font-size:21px}.vz1 .k{font-size:22px}
  .vz2 .aw text{font-size:22px}
  .vz4 .tk .evt text{font-size:16px}.vz4 .tk .aud text{font-size:14.5px}.vz4 .tk .hbt{font-size:16px}.vz4 .tk .hbs{font-size:12px}
}
/* 10-22 광고 서비스 네 칸 — 왼쪽 줄 하나 = 오른쪽 그림 하나 · 같은 번호로 짝 (지수님 「왼쪽 말과 우측이 안맞아」) */
.fp .do.pr{counter-reset:pr}
.fp .do.pr li{counter-increment:pr;padding-left:34px}
.fp .do.pr li:before{content:counter(pr);top:13px;left:0;width:22px;height:22px;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;font-family:Pretendard,sans-serif}
.vz .pn{display:inline-grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;font-size:12px;font-weight:800;font-style:normal;align-self:center}
.vz .vh{align-items:center}
.vz .vh.sep{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.vz .sub.nb{margin-top:12px;padding-top:0;border-top:0}
.fp .do.pr .ad{display:block;margin-top:6px;color:var(--muted)}
.vz1 .pp{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.vz1 .sh2{display:grid;gap:8px}
.vz1 .sh2 span{display:grid;grid-template-columns:28px minmax(0,1fr) 54px;align-items:center;gap:10px}
.vz1 .sh2 em{font-style:normal;font-size:12px;font-weight:700;color:var(--muted)}
.vz1 .sh2 i{display:block;height:14px;border-radius:7px;background:#CDBEDC;width:calc(var(--w) / 18 * 100%);transform-origin:left}
.vz1 .sh2 .s1 i{background:var(--brand)}
.vz1 .sh2 b{font-family:'Gmarket Sans',Pretendard,sans-serif;font-size:16px;letter-spacing:-.03em;color:var(--ink);text-align:right}
.vz1 .sh2 .s1 b{font-size:22px;color:var(--brand)}
.vz2 .vh+.sub.top{margin-top:12px}
.vz3 .sites .vh{margin-bottom:14px}
.vz3 .lc{display:grid;gap:18px;min-width:0}
.vz3 .kt{display:grid;gap:10px}
.vz3 .kt>div{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap}
.vz3 .kt>div .kr{margin-top:0}
.vz3 .kt .kr p{display:flex;align-items:baseline;gap:8px}
.vz3 .kt>div{background:#fff;border-radius:14px;padding:14px 16px 16px;min-width:0}
.vz3 .kt .vh{font-size:13.5px;flex-wrap:nowrap}
.vz3 .kt .kr{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:12px}
.vz3 .kt .kr p{font-size:12.5px;font-weight:700;color:var(--muted);line-height:1.3}
.vz3 .kt b{display:block;margin-bottom:4px;font-family:'Gmarket Sans',Pretendard,sans-serif;font-weight:700;font-size:30px;letter-spacing:-.04em;color:var(--brand);line-height:1;white-space:nowrap}
.vz3 .kt b small{font-family:Pretendard,sans-serif;font-weight:800;font-size:.5em;margin-left:1px}
.vz3 .pls>.vh{justify-self:start;font-size:13.5px}
@media (prefers-reduced-motion:no-preference){
  .fp:not(.on) .vz1 .sh2 i{transform:scaleX(0)}
  .fp.on .vz1 .sh2 i{animation:vzGrowX .9s .3s cubic-bezier(.2,.7,.2,1) both}
  .fp.on .vz1 .sh2 .s1 i{animation-delay:.6s}
}
@media (max-width:720px){
  .vz3 .kt{grid-template-columns:minmax(0,1fr)}
  .vz3 .pls>.vh{grid-column:1/-1}
}
/* 10-22 광고 서비스 03 ③ 스마트스토어 · 쇼핑광고 — 숫자 셋 + CTR/CVR 한 줄 */
.vz3 .kt>.k3{display:block}
.vz3 .kt .k3 .kr{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:14px}
.vz3 .kt .k3 .kr p{display:block;flex:1 1 0}
@media (max-width:720px){.vz3 .kt .k3 .kr{gap:10px 8px}.vz3 .kt .k3 .kr b{font-size:23px}}
.vz3 .kt .ks{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--muted)}
.vz3 .kt .ks strong{color:var(--brand);font-size:15px;font-weight:800;margin:0 2px}

@media(min-width:901px){.nb.n6{grid-template-columns:repeat(6,minmax(0,1fr))}}
.seo .s2{grid-column:1/-1;order:4;display:flex;flex-wrap:wrap;gap:8px 32px;border-top:1px solid var(--line);padding-top:12px}.seo .s2 p{text-align:left}.seo .s2 p b{font-size:24px}
.vz1 .pp svg.ln{margin-top:30px}
.cs5 b small{font-size:.42em;margin-left:3px;font-family:Pretendard,sans-serif;font-weight:800}

/* 10-25 광고 서비스 B 안 — 줄 글을 그 그림 머리 아래로(왼쪽 목록 뺌 · 제목 · 꼬리표는 스크롤해도 따라옴) */
#st1,#st2,#st3,#st4{align-items:start}
#st1 .tx,#st2 .tx,#st3 .tx,#st4 .tx{position:sticky;top:110px}
.vz .dsc{flex-basis:100%;margin:-2px 0 14px;font-size:13.5px;line-height:1.6;color:var(--muted);font-weight:500}
.vz .dsc .ad{display:block;margin-top:4px}
.vz3 .kt .dsc{margin:8px 0 0}
.vz3 .kt>div{align-items:flex-start}
.vz .cap{display:none}
@media(max-width:1000px){#st1 .tx,#st2 .tx,#st3 .tx,#st4 .tx{position:static}}
/* 10-25 메모 반영(메인 20 · 회사 소개 2 · 운영 사례 1) */
.nb .ind{display:inline-block;align-self:flex-start;font-style:normal;font-size:12px;font-weight:700;color:var(--brand);background:var(--tint);border-radius:999px;padding:3px 10px;margin-bottom:12px;letter-spacing:-.01em}
.nb a{cursor:default}
.db .top h4 small{font-size:12px;font-weight:600;color:#8C8596;margin-left:4px}
.db .tbl8 table{min-width:640px}
.db .tbl8 th,.db .tbl8 td{padding-left:6px;padding-right:6px;font-size:12.5px;white-space:nowrap}
.db .tbl8 .up3{color:#7FD6A4}.db .tbl8 .dn3{color:#F59A9A}
.br-mo{display:none}
@media (min-width:1600px){.form .side p.ln1{white-space:nowrap;max-width:none}}@media (max-width:1599px){.br-mo{display:inline}}@media (max-width:720px){.db .tbl8 th:nth-child(5),.db .tbl8 td:nth-child(5){display:table-cell}.db .tbl8 table{min-width:640px}}
/* 10-28 머리 로고 마크(보라 둥근 네모 + 흰 pf · 지수님 「사이트엔 이걸로 반영」) */
.logo .logo-mk{height:1.7em;width:auto;flex:none;align-self:center}

/* 10-28 머리 로고 이름 영문 두 줄(지수님 「영문으로」) — PERFORMANCE 크게 / S O H N 넓게 */
.logo .logo-en{display:inline-grid;gap:.24em;font-family:'Plus Jakarta Sans',sans-serif;line-height:1;align-self:center}
.logo .logo-en b{font-weight:800;letter-spacing:.005em}
.logo .logo-en i{font-style:normal;font-weight:600;font-size:.4em;letter-spacing:.62em}

/* 10-29 머리 메뉴 글꼴(지수님 「사이트랑 잘 어울리는 폰트로」 → G마켓 산스 → 「아래 화면들과 안어울려」) — 본문 · 제목과 같은 프리텐다드로 두고, 제목처럼 좁은 자간 · 한 단계 굵게 · 진하게 */
.nav .menu{font-family:Pretendard,system-ui,sans-serif;font-weight:600;letter-spacing:-.025em;color:#3A3737} /* 608줄 「.nav .menu,.nav .pill{G마켓}」 를 같은 세기로 덮음(처음 넣은 「.menu」 는 덮여서 안 바뀌었음) · 「도입 상담」 단추는 그대로 */
.menu a.on,.nav .menu a.on{font-weight:800}

/* 10-29 AI 솔루션 머리 제목 움직임(지수님 「광고서비스처럼 움직임넣되, 역으로 상단에 반복되는 일은 AI가 만 남게」 → 「광고서비스 쪽 어떻게 보이는지 체크하고 반영해」) — 광고 서비스(검정 윗줄이 사라지고 보라 아랫줄이 남음)의 거꾸로: 보라 윗줄 + 검정 아랫줄 → 아랫줄과 쉼표가 흐려지며 사라지고 보라 윗줄만 · 자리는 접지 않음 · 움직임 줄이기 설정이면 처음부터 윗줄만 */
.sh h1.swap2 .s1,.sh h1.swap2 .s2{display:block}
.sh h1.swap2 .s1 span{display:inline} /* 맨 위 「h1 span{display:block}」 이 쉼표를 줄로 떼지 않게 */
@media (prefers-reduced-motion:no-preference){
  .sh h1.swap2 .s2,.sh h1.swap2 .sw-cm{animation:swGone 1.6s 1.8s cubic-bezier(.4,0,.2,1) forwards}
  /* 지수님 「사라진 건 좋고 이제 반복되는 일은 AI가가 아래로 (가운데로 좀 더 내려가게)」 — 아랫줄이 사라진 뒤 윗줄이 두 줄 자리의 가운데로 천천히 */
  .sh h1.swap2 .s1{animation:swDown 1.9s 2.6s cubic-bezier(.45,0,.15,1) forwards;will-change:transform}
}
@keyframes swDown{from{transform:translateY(0)}to{transform:translateY(.58em)}}
@media (prefers-reduced-motion:reduce){.sh h1.swap2 .s2,.sh h1.swap2 .sw-cm{display:none}}
/* 머리 「도입 상담」 단추 글꼴(지수님 「도입상담 폰트는 왜 안바꼈어」) — 메뉴와 같이 608줄 G마켓을 덮어, 아래 본문 단추(프리텐다드 700)와 같게 */
.nav .pill{font-family:Pretendard,system-ui,sans-serif;font-weight:700;letter-spacing:-.02em}
/* 대시보드 모형 머리 줄(지수님 「애매하게 끊지 말고 한 줄로」) — 어느 폭에서도 한 줄 · 폰에선 모형 고르개 둘(이번 달 · 전체 매체)을 빼고 제목 + 자동 갱신만 */
.db .top{flex-wrap:nowrap;white-space:nowrap}
@media(max-width:720px){.db .top{gap:8px}.db .top span:not(.live){display:none}.db .top h4{font-size:15px}.db .top h4 small{font-size:11px;margin-left:2px}.db .top span.live{padding:5px 8px;font-size:12px}}
@media(max-width:400px){.db .top{gap:6px}.db .top h4{font-size:14px;letter-spacing:-.03em}.db .top h4 small{font-size:10.5px}.db .top span.live{padding:4px 7px;font-size:11.5px}}

/* 10-29 메인 운영 사례 칸(지수님 메모 「가로/세로 선 없애고」 · 「업종 표시 조금만 더 크게」) */
#cases .nb{border-top:0}
#cases .nb li+li{border-top:0} /* 세로 선은 다시(지수님 「세로 선은 다시 넣자」) — 위 가로선 · 폰의 칸 사이 가로선만 뺌 */
#cases .nb .ind{font-size:13.5px;padding:4px 12px;justify-self:start;width:fit-content} /* 폰에서 칸 폭만큼 늘던 것도 글자만큼 */

/* 10-29 광고 서비스 03 전환(지수님 메모 「플레이스 이미지는 빼자 안이쁘다」 · 「여기 우리 사이트도 넣고」) — 자사 사이트: 큰 창 하나 + 아래 작은 창 둘(안형준 국어 · 퍼포먼스 손)을 나란히 겹침 · 플레이스는 그림 없이 아래 한 줄 칸 */
#st3 .vz3{grid-template-columns:minmax(0,1fr)}
.vz3 .duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:-18% 4% 0;position:relative}
.vz3 .duo .w2,.vz3 .duo .w3{width:auto;margin:0}
#st3 .pls{display:block;background:#fff;border-radius:14px;padding:14px 16px 16px}
#st3 .pls>.vh{margin-bottom:6px}#st3 .pls .dsc{margin:0;text-align:left}
@media (prefers-reduced-motion:no-preference){.fp.on .vz3 .w3{animation:vzUp .8s .6s cubic-bezier(.2,.7,.2,1) both}}
@media(max-width:720px){.vz3 .duo{gap:8px;margin:-14% 2% 0}}
/* 무료 도구 머리 바로가기 — 광고 서비스의 계단(넷째가 높고 보라 = 마지막 목표)은 도구 넷엔 안 맞아 같은 높이 · 흰 칸 · 다음 도구 자리만 점선 */
.sh .ftj a:nth-child(n){min-height:118px;margin-right:0;background:#fff;border-color:var(--line);color:var(--ink)}
.sh .ftj a:nth-child(n) i,.sh .ftj a:nth-child(n):after{color:var(--brand)}.sh .ftj a:nth-child(n) small{color:var(--muted)}
.sh .ftj a:nth-child(4){background:transparent;border:1.5px dashed #BDB0CC}.sh .ftj a:nth-child(4) b{color:#8C7FA0}
.sh .ftj a:hover{border-color:var(--brand)}
.sh .ftj{align-items:stretch}.sh .ftj a{align-content:start}
@media(max-width:720px){.sh .ftj a:nth-child(n){min-height:0}}
/* 10-29 무료 도구(P3 기획 · 지수님 「무료도구로」) — 쪽: 카드 넷(그림 · 상태 · 이름 · 한 줄 · 할 일 셋 · 단추) · 넷째는 다음 도구 자리(점선) */
.tls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.tc{background:#fff;border:1px solid var(--line);border-radius:26px;padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;scroll-margin-top:110px}
.tc .tart{height:200px;border-radius:18px;background:var(--tint);position:relative;overflow:hidden;margin-bottom:22px}
.tc .tst{font-size:12.5px;font-weight:700;color:var(--brand);letter-spacing:-.01em}
.tc h3{margin-top:4px;font-size:clamp(22px,2vw,26px);font-weight:800;letter-spacing:-.04em;line-height:1.25}
.tc .ds{margin-top:8px;font-size:15px;color:var(--muted)}
.tc ul{list-style:none;margin-top:14px;display:grid;gap:6px}
.tc li{position:relative;padding-left:16px;font-size:14px;font-weight:600;color:var(--ink)}
.tc li:before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.tc .go2{margin-top:auto;padding-top:20px;align-self:flex-start}
.tc.tbc{background:transparent;border:1.5px dashed #BDB0CC}
.tc.tbc .tart{background:transparent;border:1.5px dashed #CFC4DB;display:grid;place-items:center}
.a-tbc span{font-family:'Plus Jakarta Sans',Pretendard,sans-serif;font-weight:800;font-size:28px;line-height:1.05;letter-spacing:.06em;color:#BDB0CC;text-align:center}
/* 그림 — 이름 없이도 무엇인지(확장 막대 · 막대그래프 · 소식지 표지) */
.a-memo .mbw{position:absolute;left:22px;right:22px;top:20px;height:16px;display:flex;gap:5px;align-items:center}
.a-memo .mbw span{width:7px;height:7px;border-radius:50%;background:#CDBEE3}
.a-memo .pg{position:absolute;left:22px;right:22px;top:42px;bottom:0;background:#fff;border-radius:10px 10px 0 0;padding:18px 18px 0;display:grid;gap:9px;align-content:start}
.a-memo .pg i{display:block;height:10px;border-radius:5px;background:#E7E1EE}.a-memo .pg i:first-child{height:16px;width:62%;background:#D5CAE2}.a-memo .pg i.s{width:44%}
.a-memo .nt{position:absolute;right:36px;top:64px;width:150px;background:#fff;border-radius:8px;box-shadow:0 8px 20px rgba(40,20,70,.18);overflow:hidden}
.a-memo .nt b{display:block;background:var(--brand);color:#fff;font-size:11px;padding:5px 8px}.a-memo .nt p{font-size:12px;padding:6px 8px 8px;color:var(--ink);font-weight:600}
.a-memo .pin{position:absolute;right:186px;top:56px;width:20px;height:20px;border-radius:50%;background:var(--brand);border:2px solid #fff;color:#fff;font:700 10px/16px sans-serif;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.25);font-style:normal}
.a-memo .br{position:absolute;left:34px;bottom:14px;display:flex;gap:4px;background:#1d1b22;border-radius:999px;padding:4px}
.a-memo .br em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--brand);background:#fff;border-radius:999px;padding:4px 9px}.a-memo .br em.o{background:var(--brand);color:#fff}
.a-kw{padding:22px 24px}
.a-kw .h{font-size:13px;font-weight:800;color:var(--ink)}.a-kw .h small{margin-left:6px;font-size:11px;font-weight:600;color:var(--muted)}
.a-kw .kbars{margin-top:16px;display:grid;gap:10px}
.a-kw .kbars span{display:block;height:24px;width:var(--w);border-radius:6px;background:#CDBEDC;position:relative}
.a-kw .kbars span:first-child{background:var(--brand)}
.a-kw .kbars b{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:700;color:#fff;white-space:nowrap}
.a-kw .kbars span+span b{color:var(--ink)}
.a-nl{display:grid;place-items:center}
.a-nl .ncv{width:min(250px,78%);height:166px;margin-top:34px;background:#fff;border-radius:10px 10px 0 0;box-shadow:0 10px 26px rgba(40,20,70,.14);padding:16px 18px;align-self:end}
.a-nl .k{font-size:9.5px;font-weight:800;letter-spacing:.08em;color:var(--brand)}
.a-nl .t{margin-top:6px;font-size:17px;font-weight:800;line-height:1.25;letter-spacing:-.03em;color:var(--ink)}
.a-nl .ln{margin-top:10px;display:grid;gap:6px}.a-nl .ln i{display:block;height:7px;border-radius:4px;background:#E7E1EE}.a-nl .ln i.s{width:60%}
.a-nl .tg{margin-top:10px;display:flex;gap:4px}.a-nl .tg em{font-style:normal;font-size:10px;font-weight:700;color:var(--brand);background:var(--tint);border-radius:999px;padding:2px 8px}
@media(max-width:900px){.tls{grid-template-columns:minmax(0,1fr)}.tc .tart{height:180px}}
/* 첫 쪽 한 줄 띠 — 「AI 솔루션」 바로 아래(어두운 칸 → 연보라 띠) · 카드 없음 · 데스크톱 한 줄 · 폰은 두 줄 */
.ftb{background:var(--tint);padding:22px 0}
.ftb .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap}
.ftl{display:flex;align-items:center;flex-wrap:wrap;gap:6px 0;font-size:15px;font-weight:600;color:var(--ink)}
.ftl b{font-weight:800;color:var(--brand);margin-right:16px;padding:4px 12px;border-radius:999px;background:#fff;font-size:13.5px}
.ftl span+span:before{content:"·";margin:0 10px;color:#A99BBA}
.ftl a{margin-left:18px;font-weight:800;color:var(--brand)}.ftl a:hover{text-decoration:underline;text-underline-offset:3px}
.ftf{display:flex;gap:6px;background:#fff;border-radius:999px;padding:5px 5px 5px 18px;box-shadow:inset 0 0 0 1px #D8CDE6;min-width:min(340px,100%)}
.ftf input{flex:1;min-width:0;border:0;outline:0;font:500 14px Pretendard,sans-serif;background:transparent;color:var(--ink)}
.ftf button{border:0;cursor:pointer;font:700 14px Pretendard,sans-serif;color:#fff;background:var(--brand);border-radius:999px;padding:9px 18px;white-space:nowrap}
.ftf .sent{padding:6px 10px}.ftf .sent b{font-size:14px;color:var(--brand)}.ftf .sent p{display:none}
@media(max-width:720px){.ftb .wrap{display:grid}.ftl a{margin-left:0;flex-basis:100%;margin-top:4px}.ftf{min-width:0}}

/* 회사 소개 쪽 상담 칸 — 「일하는 방식」 띠와 같은 보라 카드(지수님 10-29 메모 · about.html 만 .boxed) */
.about.boxed{background:var(--paper);padding-top:0}
.about.boxed .boxC{background:linear-gradient(120deg,#2a0f42,#431168);border-radius:28px;padding:clamp(40px,5vw,72px) clamp(24px,4.4vw,64px)}
@media(max-width:900px){.about.boxed .boxC{border-radius:22px;padding:32px 20px}}

/* 11-01 about 메모 #1 문장을 뺀 상자 — 폼이 상자 맨 위면 위 띠 · 선 없음(문장이 있는 쪽은 그대로) */
.about.boxed .boxC>.form:first-child{margin-top:0;padding-top:0;border-top:0}

/* 11-01 밤 폰 묶음(J6 390 점검 · 지수님 "모바일 쪽도 미리 체크") — 720 아래만 · 글 그대로 */
@media(max-width:720px){
  /* ⑤ 신청 폼 한 칸씩 — 예시 글 잘림 · 좁은 고르기 칸 */
  .form form{grid-template-columns:minmax(0,1fr)}
  .form{gap:20px}
  /* ⑦ 누르는 자리 44px — 글 크기 그대로, 위아래 여백으로 */
  .form .side .k2{gap:0;margin-top:16px}
  .form .side .k2 a{min-height:44px;align-items:center}
  .crumb a{display:inline-block;padding:12px 6px;margin:-12px -6px}
  /* ⑥ 머리 숫자 넷(site) → 2×2 */
  .sh .nums:has(>div:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  .sh .nums:has(>div:nth-child(4):last-child)>div:nth-child(3){border-left:0;padding-left:0}
  .sh .nums:has(>div:nth-child(4):last-child)>div:nth-child(n+3){border-top:1px solid var(--rule);padding-top:12px}
  /* ① index 「…광고주만 봅니다」 → 문 셋 */
  .adr{margin-top:24px}
}

/* 11-01 밤 폰 제목 크기(지수님 index 메모 #2 #4 "더 커야" · "작은 핸드폰에서는 쪽 째로 작아지지 줄바꿈 등이 바뀌지 않도록") — 390 을 기준으로 글 칸 폭(100vw-40px)에 비례해 작아짐 · 390~720 은 390 값 그대로
   데스크톱 비율 따라: 메인 머리 46(index 에서) · 다른 쪽 머리 40 · 칸 제목 34 · 신청 머리 26 */
@media(max-width:720px){
  .sh h1,.sh h1.swap,.sh h1.swap2{font-size:min(40px,calc((100vw - 40px) * .11429))}
  .h2,.about>.wrap>.q{font-size:min(34px,calc((100vw - 40px) * .09714))}
  .form .side h3{font-size:min(26px,calc((100vw - 40px) * .07429))}
  /* 숫자 줄(#cases) — 설명 덩어리를 오른쪽으로(지수님 index 메모 #3 "조금 더 우측으로 붙여") · 설명 칸 150px(가장 긴 줄 141px — 320 까지 줄바꿈 그대로) */
  #cases .nb a,#cases .nb li:first-child a{grid-template-columns:minmax(0,1fr) 150px}
}

/* 11-01 밤 폰 작은 글도 같은 규칙(J6 320 점검 · 지수님 #4 결) — 다른 쪽 머리 부제 · 숫자 설명이 320 에서 꺾이던 것 */
@media(max-width:720px){
  .sh .lead{font-size:min(14.5px,calc((100vw - 40px) * .04143))}
  .sh .nums span{font-size:min(12px,calc((100vw - 40px) * .0339))}
  .sh .nums div,.sh .nums div+div{padding-left:min(6px,calc((100vw - 40px) * .01714));padding-right:min(6px,calc((100vw - 40px) * .01714))}
  .sh .nums div,.sh .nums div+div{grid-template-columns:min(110px,calc((100vw - 40px) * .31429)) minmax(0,1fr)}
}

/* 11-01 밤 지수님 index 메모 #1 — 칸 끝 다른 쪽으로 가는 단추(테두리 알약 · 「광고 의뢰」 꽉 찬 단추보다 한 단 약하게) · 폰 44px 이상 · 위아래 */
.btns2{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn2{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:1.5px solid currentColor;border-radius:999px;font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--brand);transition:background .2s,color .2s}
.btn2:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.brands .btn2,.ai .btn2,.about .btn2{color:#fff}
.brands .btn2:hover,.ai .btn2:hover,.about .btn2:hover{background:#fff;color:var(--brand);border-color:#fff}
.ai .btn2{color:#D5C6F2}
@media(max-width:720px){.btns2{flex-direction:column;align-items:stretch;margin-top:24px}.btn2{min-height:50px}}
/* 11-01 밤 지수님 메모 #2 #3 — 바닥: 이름 대신 머리와 같은 로고(바닥 바탕에 맞게 연보라 · 흰) · 바닥 링크 더 크고 밝게 · 누르기 44px */
.foot .fl1{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.foot .flogo{display:inline-flex;align-items:center;gap:9px;color:#fff;font-size:15px}
.foot .flogo .logo-mk{height:1.9em;width:auto;flex:none}
.foot .flogo .logo-en{display:inline-grid;gap:.24em;font-family:'Plus Jakarta Sans',sans-serif;line-height:1}
.foot .flogo .logo-en b{font-size:1em;font-weight:800;letter-spacing:.005em;color:#fff}
.foot .flogo .logo-en i{font-style:normal;font-weight:600;font-size:.42em;letter-spacing:.62em;color:#B9B3C2}
.foot .fl{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:#fff}
.foot .fl:hover{color:#D5C6F2}
@media(max-width:720px){.foot .fl{margin:0 18px 0 0;padding:0}}

/* 11-01 밤 지수님 「우리가 믿는 것과 위에 두 시선의 사이즈가 달라」 — .prom 안 작은 머리가 본문 p 크기(22 · 600)를 받던 것 → 다른 작은 머리와 같게(14 · 700) · index 「이런 점이 다릅니다」 · site 「무엇이 다른가」도 */
.prom p.eb{font-size:14px;font-weight:700;letter-spacing:inherit;line-height:inherit}

/* 11-01 밤 지수님 바닥 「광고 / 사이트제작 / AI솔루션 이렇게 3개」 · 「상담하기 버튼이 따라다니면」 */
.foot .fl2{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0 22px}
.foot .fl2 .fl{margin:0;text-decoration:none}
.foot .fl2 .fl.on{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.foot .fy{font-style:normal;color:#8E8994}
@media(max-width:720px){.foot .fy{flex-basis:100%;margin-top:2px}}
@media(max-width:720px){
  .dock{transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .dock.on{transform:none}
}
@media(prefers-reduced-motion:reduce){.dock,.float{transition:none}}
/* 「따라다니면」 — 글 · 그림 위에 오면 숨던 옛 규칙(js 「빈 자리에서만 보임」 · .blk)을 끔: 머리 단추를 지나면 신청 칸 전까지 늘 보임 */
.float.on.blk{opacity:1;transform:none;pointer-events:auto}

/* 11-01 밤 오픈 준비 — 바닥 사업자 정보 두 줄 + 개인정보처리방침(굵게) · 〔 〕 = 지수님 확인 중 자리(옅은 노랑) */
.foot .biz{display:block;border-top:0;padding-top:14px;font-size:12.5px;line-height:1.7;color:#8E8994}
.foot .biz p{margin:0}
.foot .biz .pv-l{display:inline-flex;align-items:center;min-height:36px;color:#fff}
.foot .biz .pv-l:hover{color:#D5C6F2}
mark.tbd{background:#FFF3C4;color:#2A2530;border-radius:3px;padding:0 2px}
/* 신청 폼 동의 체크(필수 · 체크해야 보내기) */
.form .agree{grid-column:1/-1;flex-direction:row;align-items:flex-start;gap:10px;font-size:14px;color:#fff;cursor:pointer}
.form .agree input{width:18px;height:18px;min-width:18px;margin-top:2px;accent-color:#B79AE0}
.form .agree-d{grid-column:1/-1;margin-top:-4px;font-size:12.5px;line-height:1.65;color:#A8A2B0}
.form .agree-d summary{display:inline-block;cursor:pointer;color:#C9B6EA;text-decoration:underline;text-underline-offset:3px;padding:4px 0}
.form .agree-d p{margin-top:6px}
.form button[type=submit][disabled]{opacity:.45;cursor:not-allowed}