/* 스크린샷 화면 — 이미지를 그대로 올리고 그 위에 히트박스만 얹는다.
 * 히트박스는 평소 완전히 투명하다. ?debug=hits 로 열었을 때만 보인다. */

body{background:#e9edf2}

.shotwrap{
  max-width:var(--app-w);
  margin:0 auto;
  background:#fff;
  min-height:100dvh;
}
@media (min-width:560px){
  .shotwrap{box-shadow:0 0 0 1px rgba(0,10,20,.06),0 18px 50px rgba(0,10,20,.08)}
}
/* 히트박스는 이미지 자체를 기준으로 놓인다 */
.shot{position:relative}
.shot__img{display:block;width:100%;height:auto}

.hit{position:absolute;display:block;background:transparent;border:0;cursor:pointer}

/* 리뷰 보드 안(iframe)에 넣었을 때 */
body.embed{background:#fff}
body.embed .shotwrap{max-width:none;min-height:0;box-shadow:none}

/* 개발용 히트박스 확인 — ?debug=hits */
body.debug-hits .hit{
  background:rgba(40,112,255,.14);
  box-shadow:inset 0 0 0 1.5px rgba(40,112,255,.65);
  border-radius:8px;
}
body.debug-hits .hit::after{
  content:attr(data-name);
  position:absolute;left:4px;top:3px;
  font-size:10px;font-weight:800;color:#1b57d8;
  background:rgba(255,255,255,.86);border-radius:5px;padding:1px 5px;
  white-space:nowrap;pointer-events:none;
}

/* 이미지가 없을 때 */
.shot__missing{
  aspect-ratio:9/19.5;
  display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;
  border:2px dashed #d6dbe2;border-radius:16px;margin:20px;color:#8a93a0;
}
.shot__missing b{font-size:16px;color:#5b6675}
.shot__missing code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:#f1f4f8;border-radius:6px;padding:3px 8px;color:#41506a;
}
.shot__missing span{font-size:12px}