클리어 스페이스 (여백 규정)

<div class="cs">
  <div class="intruder" id="intr">TEXT BLOCK</div>
  <div class="zone" id="zone"><div class="mark">◆</div></div>
</div>

.cs{position:relative;width:min(86%,280px);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.zone{position:relative;padding:22px;border:1.5px dashed var(--muted);border-radius:6px;display:grid;place-items:center}
.mark{font-size:clamp(24px,7vmin,36px);color:var(--accent);line-height:1}
.intruder{position:absolute;left:6%;top:50%;transform:translate(0,-50%);
  font-size:10px;letter-spacing:.06em;color:var(--fg);background:var(--surface);
  border:1px solid var(--line);border-radius:4px;padding:5px 9px;white-space:nowrap;
  transition:transform 1.1s cubic-bezier(.4,0,.2,1)}

const zone = document.getElementById('zone');
const intr = document.getElementById('intr');
function measure() {
  const zr = zone.getBoundingClientRect();
  const ir = intr.getBoundingClientRect();
  const dx = zr.left - ir.right - 10;
  intr.style.setProperty('--dx', dx + 'px');
}
requestAnimationFrame(measure);
window.addEventListener('resize', measure);
let pushed = false;
setInterval(() => {
  pushed = !pushed;
  intr.style.transform = pushed ? 'translate(var(--dx),-50%)' : 'translate(0,-50%)';
}, 1700);