/* 화면(Figma SVG) · 설명 번호 · 확대 보기 */
.mock-figure { margin: 20px 0 12px; }
.mock-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid #e6ebf2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(27, 36, 51, 0.04), 0 10px 30px rgba(27, 36, 51, 0.08);
}
.mock-canvas { position: relative; min-height: 120px; }
.mock-stage { position: absolute; inset: 0; }
/* 번호 자리 여백이 있는 화면: 화면 영역만 테두리로 구분 */
.mock-canvas.has-gutter { background: #f6f8fb; }
.mock-canvas.has-gutter .mock-stage { box-shadow: -1px 0 0 #e6ebf2; }
.mock-stage .screen-svg { display: block; width: 100%; height: 100%; }
.mock-stage .screen-img { display: block; width: 100%; height: 100%; user-select: none; } /* PNG 화면 (APPFIT) */
.screen-error { padding: 40px; text-align: center; color: #64748b; font-size: 14px; }
.mock-figure figcaption { margin-top: 10px; font-size: 13.5px; color: var(--fg-muted); text-align: center; }

#article .mock-frame { cursor: zoom-in; }
#article .mock-frame:focus-visible { outline: 3px solid var(--accent-line); outline-offset: 2px; }
.zoom-hint {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(15, 23, 42, 0.78); color: #fff; font-size: 12px; font-weight: 600;
  opacity: 0; transition: opacity 0.15s; pointer-events: none;
}
#article .mock-frame:hover .zoom-hint, #article .mock-frame:focus-visible .zoom-hint { opacity: 1; }
@media (hover: none) { #article .zoom-hint { opacity: 1; } }

/* 설명 번호 (화면 위에 겹치는 층, 위치는 Figma 좌표) */
.mark-layer { position: absolute; inset: 0; pointer-events: none; }
.mark-box {
  position: absolute;
  border: 2.5px solid var(--mark);
  border-radius: 8px;
  transition: background 0.12s, box-shadow 0.12s;
}
.mark-box.hl { background: rgba(229, 72, 77, 0.08); box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.18); }
/* soft-marks: 평소에는 영역 표시 없음, 강조할 때만 영역 바깥에 테두리 (UI를 가리지 않게) */
.soft-marks .mark-box { border: 0; border-radius: 6px; transition: background 0.12s, outline-color 0.12s; outline: 2px solid transparent; outline-offset: 4px; }
.soft-marks .mark-box.hl { background: none; box-shadow: none; outline-color: transparent; }
/* 번호 → 영역 연결선(.spot-lines)과 스포트라이트(.spot-dim) — app.js spotMarks.
   웹에서는 마우스를 올린 번호의 .spot-dim 만 보인다 (촬영 모드는 하나로 항상 표시) */
.spot-dim, .spot-lines { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.spot-dim[data-n] { opacity: 0; transition: opacity 0.15s; }
.spot-dim[data-n].hl { opacity: 1; }
.spot-lines { z-index: 1; }
.soft-marks .mark-badge { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .spot-dim[data-n] { transition: none; } }
@media (hover: none) { .soft-marks ~ .marks .mark-item { cursor: pointer; } }
.mark-badge {
  position: absolute;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--mark); color: #fff; border: 2px solid #fff;
  display: grid; place-items: center;
  font-family: var(--font); font-size: 13px; font-weight: 700; line-height: 1;
  box-shadow: 0 2px 6px rgba(229, 72, 77, 0.35);
  pointer-events: auto; cursor: pointer;
}

/* 확대 보기 */
body.lb-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: rgba(15, 23, 42, 0.82); }
.lb-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #0f172a; color: #fff; font-size: 14px; }
.lb-tip { color: #94a3b8; font-size: 12.5px; }
.lb-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.lb-actions button { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid #334155; background: transparent; color: #cbd5e1; font-size: 13px; cursor: pointer; }
.lb-actions button.on { background: #fff; color: #0f172a; border-color: #fff; font-weight: 600; }
.lb-actions .lb-close { width: 32px; padding: 0; display: grid; place-items: center; margin-left: 6px; }
.lb-body { flex: 1; overflow: auto; padding: 24px; }
.lb-body .mock-figure { margin: 0 auto; }
.lb-body .mock-frame { border: 0; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); }
.lb-body .mock-figure[data-zoom="fit"] .mock-frame { width: 100%; }
.lb-body .mock-figure[data-zoom="fit"] .mock-canvas { margin: 0 auto; }
.lb-body .mock-figure[data-zoom="actual"] .mock-frame { width: max-content; overflow: visible; margin: 0 auto; }
.lb-body .mock-figure .mock-frame { background: transparent; }
@media (max-width: 640px) { .lb-tip { display: none; } .lb-body { padding: 12px; } .lb-actions button[data-zoom] { padding: 0 8px; } }

/* 확대 보기 툴팁 (soft-marks 화면) */
.mark-tip {
  position: fixed; z-index: 10; max-width: 340px; pointer-events: none;
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 12px;
  background: #fff; color: #1b2433; font-family: var(--font); font-size: 13.5px; line-height: 1.55;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.mark-tip .num { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--mark); color: #fff; font-size: 12px; font-weight: 700; }
.mark-tip .mark-title { font-weight: 700; margin-bottom: 2px; }
.mark-tip ul { margin: 0; padding-left: 16px; }
.mark-tip li { margin: 2px 0; }
.mark-tip a { color: inherit; text-decoration: none; }