공개 재게시 확산

<div class="s-demo"><div class="rp"><div class="rp-card"><small>ORIGINAL</small><b>USEFUL IDEA</b><span>CREATOR CREDIT</span></div><div class="rp-arrow">→</div><div class="rp-card middle"><small>REPOST</small><b>FRIEND'S NOTE</b><span>CREDIT KEPT</span></div><div class="rp-arrow">→</div><div class="rp-card reach"><small>FRIEND'S FEED</small><b>NEW AUDIENCE</b><span>MAY REACH</span></div></div></div>

.s-demo{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(8px,3vmin,20px);font:700 clamp(10px,max(2.8vmin,1vw),16px)/1.25 sans-serif;color:var(--fg)}.s-demo *{box-sizing:border-box}@media(min-width:600px){.s-demo>div{transform:scale(1.4)}}.rp{width:min(94vw,560px);display:flex;align-items:center;gap:clamp(3px,1.2vmin,10px)}.rp-card{width:30%;min-width:0;height:clamp(100px,31vmin,190px);padding:clamp(5px,1.5vmin,11px);display:flex;flex-direction:column;justify-content:space-between;border:2px solid var(--fg);background:var(--surface);font-size:clamp(10px,max(1.8vmin,1vw),13px)}.rp-card small,.rp-card span{font-size:clamp(10px,max(1.5vmin,1vw),12px);color:var(--muted)}.rp-card b{font-size:clamp(10px,max(2vmin,1vw),16px)}.rp-arrow{font-size:clamp(14px,4vmin,28px);color:var(--accent)}.rp-card.middle{border-color:var(--accent);animation:rpmove 5s infinite}.rp-card.reach{background:var(--fg);color:var(--bg);animation:rpmove 5s 1s infinite}.rp-card.reach small,.rp-card.reach span{color:var(--bg)}@keyframes rpmove{0%,15%{transform:translateY(8px);box-shadow:none}35%,88%{transform:none;box-shadow:4px 4px 0 var(--accent)}100%{transform:translateY(8px);box-shadow:none}}