/* Explorer 대표 화면과 강조(2026-10-16, spotlight-shot.js). 베젤은 mac-shot.css 그대로 */
.spot { position: relative; }
.spot-scroll { height: var(--spot-len, 300vh); }
.spot-scroll .spot-sticky { position: sticky; top: calc(var(--nav-h, 58px) + 3vh); }
.spot-sticky { display: grid; gap: 14px; }
.spot-stage { position: relative; overflow: visible; }
.spot-stage > img { display: block; width: 100%; height: auto; border-radius: 3px 3px calc(var(--mr) - var(--mb)) calc(var(--mr) - var(--mb)); }
.spot-stage > img.shot-dark { display: none; }
html[data-theme="dark"] .spot-stage > img.shot-light { display: none; }
html[data-theme="dark"] .spot-stage > img.shot-dark { display: block; }
.spot-veil, .spot-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* 휴대폰(spotlight-shot.js NARROW, 10-20): 잘라 낸 그림만 보인다. 강조는 온전한 화면 좌표라 잘라 낸 그림 위에서는 자리가 맞지 않아 다 걷는다 */
.spot.spot-phone :is(.spot-veil, .spot-ring, .spot-lens, .spot-links, .spot-zoom) { display: none !important; }
/* 어둡게 덮는 막과 이어 긋는 선은 제 층에(10-20): 바뀌는 동안 아래 화면 캡처까지 다시 칠하지 않게. 막의 옅기는 합성만 */
.spot-veil { will-change: opacity; }
.spot-links { will-change: transform; }
.spot-veil { border-radius: 3px 3px calc(var(--mr) - var(--mb)) calc(var(--mr) - var(--mb)); opacity: var(--veil, 0); }
.spot-dim { fill: rgba(9, 16, 12, .62); }
html[data-theme="dark"] .spot-dim { fill: rgba(0, 0, 0, .62); }
/* 형광펜 자리의 노란 테두리(실앱 --hl-line) */
.spot-ring { position: absolute; border-radius: 6px; box-shadow: 0 0 0 2.5px #e8c547, 0 0 22px 4px rgba(245, 208, 0, .35); opacity: 0; pointer-events: none; will-change: opacity; }
/* 숨쉬기(10-20): 전에는 그림자(box-shadow) 자체를 애니메이션해 매 장 다시 칠했다(지도 구간 스크롤 CPU 약 7포인트). 큰 빛무리는 덧붙인 층에 그려 두고
   그 옅기만 움직인다(합성만, 다시 칠하지 않음). 재생과 멈춤은 spotlight-shot.js 가 고리의 animationPlayState 로 주고 덧붙인 층이 물려받는다 */
.spot-ring::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 34px 8px rgba(245, 208, 0, .45); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .spot-ring { animation-play-state: paused; } .spot-ring::after { animation: spot-pulse 2.4s ease-in-out 3; animation-play-state: inherit; will-change: opacity; } }   /* 세 번 숨쉬고 멈춘다(끝없이 돌면 브라우저가 초당 60장을 계속 만든다) */
@keyframes spot-pulse { 50% { opacity: 1; } }
/* 떠오르는 조각: 같은 캡처의 그 자리를 크게, 그림자와 초록 테두리 */
.spot-lens { position: absolute; border-radius: 8px; opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(47, 107, 70, .85), 0 22px 60px -10px rgba(0, 0, 0, .45); will-change: transform, opacity; }
html[data-theme="dark"] .spot-lens { box-shadow: 0 0 0 2px rgba(155, 204, 169, .9), 0 22px 60px -10px rgba(0, 0, 0, .7); }
/* 조각 안의 그림(spotlight-shot.js lensImg): 조각 모양대로 자르고, 테마에 맞는 한 장만 */
.spot-lens-in { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.spot-lens-in > img { position: absolute; max-width: none; display: block; }
.spot-lens-in > img.shot-dark, html[data-theme="dark"] .spot-lens-in > img.shot-light { display: none; }
html[data-theme="dark"] .spot-lens-in > img.shot-dark { display: block; }
.spot-lens-left { transform-origin: 0% 40%; }
.spot-lens-right { transform-origin: 100% 0%; }
.spot-tag { position: absolute; left: 10px; top: -13px; padding: 4px 9px; border-radius: 999px; background: #1e6e43; color: #fff;
  font: 700 12px/1 var(--font, "Jost", "Noto Sans KR", system-ui, sans-serif); white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
.spot-lens-right .spot-tag { left: auto; right: 10px; }
html[data-theme="dark"] .spot-tag { background: #9bcca9; color: #0d100e; }
/* 형광펜에서 두 갈래로 가는 선(노란 기) */
.spot-link { fill: none; stroke: #e8c547; stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .35)); }
.spot-dot { fill: #e8c547; opacity: 0; }
/* 아래 한 줄(라이브 원문 두 문장이 장면 따라 바뀐다) */
.spot-cap { position: relative; margin: 6px 0 0; min-height: 1.6em; font-size: clamp(16px, 1.35vw, 20px); font-weight: 650; line-height: 1.5; letter-spacing: -.02em; color: var(--text); }
.spot-cap span { position: absolute; left: 0; top: 0; right: 0; opacity: 0; transition: opacity .25s ease; }
/* 확대 조각(휴대폰): 화면 위 조각이 너무 작아서 아래에 크게 따로 보인다 */
.spot-zoom { display: none; }
@media (max-width: 700px) {
  .spot-lens, .spot-ring { display: none; }
  .spot-zoom { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; align-items: start; }
  .spot-zp { position: relative; border-radius: 10px; background-image: var(--spot-l); background-repeat: no-repeat; opacity: 0;
    box-shadow: 0 0 0 1.5px rgba(47, 107, 70, .7), 0 12px 30px -10px rgba(0, 0, 0, .35); margin-top: 14px; }
  html[data-theme="dark"] .spot-zp { background-image: var(--spot-d); }
  .spot-zp .spot-tag { top: -11px; font-size: 11px; }
  .spot-cap { min-height: 3em; }
}
@media (prefers-reduced-motion: reduce) { .spot-cap span { transition: none; } }
/* 누르면 크게(10-19, spotlight-shot.js zoom 옵션, 한 숲): 같은 뒤 막(mac-shot.css .shot-zoom-bg) 위에 장면을 크게. 아래 한 줄은 어두운 막 위라 밝은 글자 */
.spot-shot.zoomable { cursor: zoom-in; }
.spot-zoomed { position: fixed; z-index: 61; cursor: zoom-out; outline: none; }
.spot-zoomed .spot-sticky { gap: 10px; }
.spot-zoomed .spot-cap { margin: 2px 0 0; padding: 0 4px; color: #eef5ef; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.spot-zoomed .spot-cap span { left: 4px; right: 4px; }