프로덕트 스크린샷 프레임

<div class="frame">
  <div class="chrome"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><span class="url">app.example.com/dashboard</span></div>
  <div class="screen" id="screen">
    <div class="side"><i></i><i></i><i></i><i></i></div>
    <div class="main">
      <div class="row"><b class="card"></b><b class="card"></b><b class="card"></b></div>
      <div class="chart"><span></span><span></span><span></span><span></span><span></span></div>
    </div>
  </div>
</div>

.frame{width:min(92%,760px);height:min(88%,300px);border-radius:12px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:0 16px 40px rgba(0,0,0,.14);display:flex;flex-direction:column;
  animation:float 5s ease-in-out infinite}
.chrome{display:flex;align-items:center;gap:6px;padding:clamp(5px,1.3vmin,9px) clamp(8px,2vmin,12px);
  border-bottom:1px solid var(--line)}
.dot{width:clamp(5px,1.1vmin,8px);height:clamp(5px,1.1vmin,8px);border-radius:50%}
.dot.r{background:#f25c5c}.dot.y{background:#f2b45c}.dot.g{background:#5cc26e}
.url{margin-left:clamp(6px,1.6vmin,12px);font-size:clamp(6.5px,1.2vmin,9px);color:var(--muted);
  background:var(--bg);border-radius:4px;padding:.2em .8em}
.screen{flex:1;display:flex;background:var(--bg)}
.side{width:18%;display:flex;flex-direction:column;gap:12%;padding:8%;border-right:1px solid var(--line)}
.side i{display:block;height:9%;border-radius:3px;background:var(--line)}
.side i:first-child{background:var(--accent)}
.main{flex:1;display:flex;flex-direction:column;gap:8%;padding:6%}
.row{display:flex;gap:6%;height:34%}
.card{flex:1;border-radius:8px;background:var(--surface);border:1px solid var(--line)}
.chart{flex:1;display:flex;align-items:flex-end;gap:6%;padding:4% 2%}
.chart span{flex:1;border-radius:3px 3px 0 0;background:var(--accent-3)}
.chart span:nth-child(1){height:40%}.chart span:nth-child(2){height:70%}.chart span:nth-child(3){height:55%}
.chart span:nth-child(4){height:85%}.chart span:nth-child(5){height:60%}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2%)}}