시각적으로 숨기기

<div class="stage">
  <div class="pane">
    <div class="tag">display: none</div>
    <button class="sb"><span class="glass"></span></button>
    <div class="eye ok">눈: 안 보임</div>
    <div class="ear bad">SR: (없음)</div>
  </div>
  <div class="pane">
    <div class="tag">visibility: hidden</div>
    <button class="sb"><span class="glass"></span><span class="ghost">Search</span></button>
    <div class="eye ok">눈: 안 보임</div>
    <div class="ear bad">SR: (없음)</div>
  </div>
  <div class="pane">
    <div class="tag">.sr-only</div>
    <button class="sb"><span class="glass"></span></button>
    <div class="eye ok">눈: 안 보임</div>
    <div class="ear good">SR: "Search"</div>
  </div>
</div>

.stage{width:96%;height:90%;display:flex;gap:3%}
.pane{position:relative;flex:1;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8%;padding:16% 4% 6%}
.tag{position:absolute;top:8px;left:8px;right:8px;font:700 9px/1.2 ui-monospace,monospace;color:var(--muted);text-align:center}
.sb{width:30%;aspect-ratio:1;border-radius:9px;border:1px solid var(--line);background:var(--bg);display:grid;place-items:center;position:relative}
.glass{width:44%;height:44%;border:2px solid var(--fg);border-radius:50%;position:relative}
.glass::after{content:'';position:absolute;width:6px;height:2px;background:var(--fg);right:-5px;bottom:-1px;transform:rotate(45deg)}
.ghost{position:absolute;visibility:hidden;font-size:8px}
.eye,.ear{font:700 9.5px/1.2 ui-monospace,monospace;text-align:center}
.eye.ok{color:var(--muted)}
.ear.bad{color:var(--accent-2)}
.ear.good{color:var(--accent-3)}