물리적 어포던스

<div class="afp-wrap">
  <div class="afp-door">
    <div class="afp-panel afp-plate"></div>
    <svg class="afp-hand" viewBox="0 0 40 40"><path d="M8,26 Q8,14 20,14 Q32,14 32,26 L32,32 L8,32 Z"/></svg>
    <span class="afp-cap">flat plate → push</span>
  </div>
  <div class="afp-door">
    <div class="afp-panel afp-bar"></div>
    <svg class="afp-hand afp-hand-pull" viewBox="0 0 40 40"><path d="M8,26 Q8,14 20,14 Q32,14 32,26 L32,32 L8,32 Z"/></svg>
    <span class="afp-cap">bar handle → pull</span>
  </div>
</div>

.afp-wrap{display:flex;gap:clamp(10px,5vmin,30px);align-items:center;justify-content:center;width:100%;height:100%;padding:clamp(8px,3vmin,16px)}
.afp-door{position:relative;width:34%;max-width:150px;height:78%;background:var(--surface);border:1.5px solid var(--line);border-radius:4px;display:flex;align-items:center;justify-content:center}
.afp-panel{position:absolute}
.afp-plate{width:34%;height:38%;background:var(--muted);opacity:.5;border-radius:3px;top:30%;left:50%;transform:translateX(-50%)}
.afp-bar{width:16%;height:44%;background:var(--accent);border-radius:3px;top:28%;right:14%}
.afp-hand{width:20%;position:absolute;top:34%;left:8%;fill:var(--accent-2);animation:afp-push 2s ease-in-out infinite}
.afp-hand-pull{left:auto;right:36%;animation:afp-pull 2s ease-in-out infinite}
.afp-cap{position:absolute;bottom:-1.9em;font-size:clamp(8px,2.2vmin,11px);color:var(--muted);white-space:nowrap}
@keyframes afp-push{0%,20%{transform:translateX(0)}50%{transform:translateX(60%)}80%,100%{transform:translateX(0)}}
@keyframes afp-pull{0%,20%{transform:translateX(0)}50%{transform:translateX(-60%)}80%,100%{transform:translateX(0)}}