동적 콘텐츠

<div class="mail"><div class="mailhead"><span>TO: CUSTOMER</span><b>EMAIL</b></div><h3>YOUR NEXT PICK</h3><div class="slot"><div class="tile"></div><div><small>PRODUCT SLOT</small><strong id="offer">WELCOME SET</strong><span id="group">NEW CUSTOMER</span></div></div><footer>ONE TEMPLATE · TWO AUDIENCES</footer></div>

.mail{width:min(84%,430px);border:2px solid var(--fg);background:var(--surface);font:800 clamp(10px,max(3.7vmin,1vw),16px)/1.2 sans-serif;box-shadow:clamp(4px,1vmin,9px) clamp(4px,1vmin,9px) 0 var(--line)}.mailhead{display:flex;justify-content:space-between;padding:clamp(7px,1.6vmin,14px);border-bottom:1px solid var(--line);font-size:max(10px,1vw,.8em)}.mailhead b{color:var(--accent)}.mail h3{font-size:clamp(14px,3vmin,27px);margin:clamp(9px,2vmin,18px)}.slot{display:flex;gap:clamp(8px,2vmin,18px);margin:0 clamp(9px,2vmin,18px);padding:clamp(8px,2vmin,17px);background:var(--bg);border:2px dashed var(--accent)}.tile{width:clamp(34px,8vmin,72px);aspect-ratio:1;flex:none;background:linear-gradient(135deg,var(--accent),var(--accent-2));animation:swap 3s infinite}.slot>div:last-child{display:grid;align-content:center;gap:4px}.slot small,.slot span{color:var(--muted);font-size:max(10px,1vw,.75em)}.slot strong{color:var(--accent)}.mail footer{padding:clamp(8px,1.8vmin,16px);font-size:max(10px,1vw,.7em);letter-spacing:.08em}@keyframes swap{0%,40%,100%{filter:hue-rotate(0deg);transform:scale(1)}55%,85%{filter:hue-rotate(65deg);transform:scale(.9)}}

const offer=document.querySelector('#offer'),group=document.querySelector('#group');let returning=false;setInterval(()=>{returning=!returning;offer.textContent=returning?'REFILL PICK':'WELCOME SET';group.textContent=returning?'RETURNING CUSTOMER':'NEW CUSTOMER'},3000);