@font-face {
  font-family: 'Pretendard';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('fonts/PretendardVariable.woff2') format('woff2-variations');
}

:root {
  --bg: #f4f4f5;
  --card: #ffffff;
  --line: #e4e4e7;
  --line-2: #d4d4d8;
  --text: #18181b;
  --sub: #52525b;
  --mute: #a1a1aa;
  --point: #ff5a00;
  --point-soft: #fff1e8;
  --ok: #16a34a;
  --ok-soft: #ecfdf3;
  --ink: #27272a;
  --radius: 16px;
  --font: 'Pretendard', -apple-system, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); word-break: keep-all; }
button { font-family: inherit; }
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex: none; }

/* ── 캡처 + 강조 ── */
.shot { position: relative; overflow: hidden; border-radius: 12px; background: #fafafa; border: 1px solid var(--line); }
.shot-inner { position: absolute; inset: 0; transform-origin: 0 0; transition: transform .75s cubic-bezier(.2,.75,.2,1); will-change: transform; }
.shot img { display: block; width: 100%; height: 100%; user-select: none; }
.shot-ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.shot-ov .dim { transition: fill-opacity .4s; }
.shot-ov .ring { fill: none; stroke: var(--point); stroke-width: 4; opacity: .25; transition: opacity .3s; }
.shot-ov .ring.on { opacity: 1; }
.shot-ov .halo { fill: none; stroke: var(--point); stroke-width: 4; opacity: 0; }
.shot-ov .halo.on { animation: halo 1.8s ease-out infinite; }
.shot-ov .badge circle { fill: var(--point); }
.shot-ov .badge text { fill: #fff; font-family: var(--font); font-weight: 800; }
.shot-ov .badge { opacity: .35; transition: opacity .3s; }
.shot-ov .badge.on { opacity: 1; }
@keyframes halo {
  0% { stroke-width: 4; opacity: .7; }
  100% { stroke-width: 22; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shot-inner { transition: none; }
  .shot-ov .halo.on { animation: none; }
}