Bleed

<div class="board">
  <div class="sheet">
    <div class="art" id="art"></div>
    <div class="trim"></div>
    <span class="lbl lt">trim</span>
    <span class="lbl lb">bleed</span>
  </div>
  <div class="tag" id="tag"></div>
</div>

.board{position:relative;width:100%;height:100%;display:grid;place-items:center}
.sheet{position:relative;height:72%;aspect-ratio:3/4;outline:2px dashed var(--accent-2);outline-offset:14px}
.trim{position:absolute;inset:0;border:1.5px solid var(--fg);pointer-events:none}
.art{position:absolute;border-radius:2px;background:linear-gradient(135deg,var(--accent),var(--accent-3));transition:inset .9s cubic-bezier(.4,0,.2,1)}
.art.short{inset:16%}
.art.full{inset:-14px}
.lbl{position:absolute;font:700 8px/1 ui-monospace,monospace;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.lt{top:-13px;left:0}
.lb{top:-13px;right:0}
.tag{position:absolute;bottom:7%;font:600 11px/1.3 system-ui,sans-serif;color:var(--muted);text-align:center;padding:0 6%}

const art = document.getElementById('art');
const tag = document.getElementById('tag');
let short = true;
function apply(){
  art.className = 'art ' + (short ? 'short' : 'full');
  tag.textContent = short ? '재단선 안쪽에서 끝남 — 밀리면 흰 여백' : '도련선까지 확장 — 밀려도 안전';
}
apply();
setInterval(() => { short = !short; apply(); }, 1900);