/* 실캡처 이미지용 최소 휴대폰 프레임. box-shadow로 베젤을 그려 이미지 자체의
   렌더링 박스 크기(width/height)에 영향을 주지 않는다 — zone-box.js의 세이프존
   퍼센트 좌표는 이 요소의 getBoundingClientRect() 를 기준으로 계산되므로,
   border를 썼다면 그 두께만큼 좌표가 어긋난다. */
.phone-frame{
  position:relative;display:block;width:100%;
  border-radius:22px;overflow:hidden;
  box-shadow:0 0 0 6px #111,0 0 0 7px rgba(255,255,255,.08);
}
.phone-frame-image{width:100%;height:auto;display:block;border-radius:inherit}
.phone-frame-camera{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:10px;height:10px;border-radius:50%;background:#111;
  box-shadow:0 0 0 2px rgba(255,255,255,.14);z-index:2;
}

/* PC 캡처 — 브라우저 창. 띠(28px)는 이미지 바깥 위에 두고 레이아웃에 넣지 않는다(세이프존 기준 = 이미지 박스). */
.has-browser-frame{margin-top:28px}
.browser-frame{
  position:relative;display:block;width:100%;
  border-radius:0 0 6px 6px;
  box-shadow:0 0 0 1px #c9ced6,0 4px 14px rgba(0,0,0,.12);
}
.browser-frame .phone-frame-image{border-radius:0 0 6px 6px}
.browser-frame-bar{
  position:absolute;left:-1px;right:-1px;bottom:100%;height:28px;
  display:flex;align-items:center;gap:10px;padding:0 10px;box-sizing:border-box;
  background:#eef0f3;border:1px solid #c9ced6;border-bottom:none;border-radius:6px 6px 0 0;
}
.browser-frame-dots{display:flex;gap:5px}
.browser-frame-dots i{width:8px;height:8px;border-radius:50%;background:#c3c8cf;display:block}
.browser-frame-url{flex:1;height:14px;border-radius:7px;background:#fff;border:1px solid #d8dce2}