마케팅 믹스 모델 (MMM)

<div class="mmm"><div class="head">SPEND → ESTIMATED RESPONSE <b id="out">+62</b></div><svg viewBox="0 0 360 145" preserveAspectRatio="none"><path d="M20 125 Q68 71 125 47 Q205 17 345 11" fill="none" stroke="var(--accent)" stroke-width="5"/><path d="M20 125H345" stroke="var(--line)" stroke-width="2"/><line id="guide" x1="125" x2="125" y1="47" y2="125" stroke="var(--muted)" stroke-dasharray="5 5"/><circle id="point" cx="125" cy="47" r="9" fill="var(--fg)"/></svg><div class="ctrl"><span>MEDIA SPEND</span><input id="range" type="range" min="0" max="100" value="33"><b id="spend">33</b></div></div>

.mmm{width:min(87%,590px);font:850 clamp(10px,max(2vmin,1vw),14px)/1.2 sans-serif}.head,.ctrl{display:flex;align-items:center;justify-content:space-between;gap:10px}.head{border-bottom:2px solid var(--fg);padding-bottom:8px}.head b{color:var(--accent);font-size:clamp(17px,4vmin,30px)}svg{width:100%;height:clamp(88px,23vmin,170px);display:block;margin-top:clamp(7px,2vmin,14px)}.ctrl{border-top:1px solid var(--line);padding-top:8px}.ctrl span{white-space:nowrap;color:var(--muted);font-size:clamp(10px,max(1.7vmin,1vw),12px)}input{flex:1;min-width:0;accent-color:var(--accent)}

const r=document.querySelector('#range');function draw(){const v=Number(r.value),x=20+3.25*v,y=125-114*(1-Math.exp(-v/27));document.querySelector('#point').setAttribute('cx',String(x));document.querySelector('#point').setAttribute('cy',String(y));document.querySelector('#guide').setAttribute('x1',String(x));document.querySelector('#guide').setAttribute('x2',String(x));document.querySelector('#guide').setAttribute('y1',String(y));document.querySelector('#out').textContent='+'+Math.round(100*(1-Math.exp(-v/34)));document.querySelector('#spend').textContent=String(v)}r.oninput=()=>{clearInterval(timer);draw()};let dir=1;const timer=setInterval(()=>{let v=Number(r.value)+dir*8;if(v>=96||v<=8)dir*=-1;r.value=String(Math.max(0,Math.min(100,v)));draw()},460);draw();