/* 맥북 베젤과 누르면 확대(2026-10-15 19:33 Y "라이브 중인 랜딩의 사용법 파트에서 explorer, reader 등 화면이 맥 배젤이 있잖아").
   라이브 설명서(landing/features-ko.html .product .pshot, 운영자 09-25)의 값을 그대로 옮겼다: 짙은 테두리, 위는 창 제목 줄(왼쪽에 창 버튼 셋),
   바깥 반지름 --mr 과 테두리 --mb 가 폭에 따라 함께 바뀌고, 스크린샷 아래 모서리 반지름 = --mr - --mb(동심). 확대 스크립트는 mac-shot.js */
.mac-shot { --mb: clamp(4px, .55vw, 8px); --mr: clamp(8px, .9vw, 13px); --bar: clamp(16px, 1.6vw, 24px);
  position: relative; margin: 0; padding: var(--bar) var(--mb) var(--mb); border-radius: var(--mr); background: #15181a;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .22), inset 0 0 0 1px #2c3236; }
.mac-shot .plights { position: absolute; top: 0; left: calc(var(--mb) + clamp(2px, .3vw, 5px)); height: var(--bar); display: flex; align-items: center; gap: clamp(4px, .42vw, 6px); }
.mac-shot .plights i { width: clamp(7px, .6vw, 9px); aspect-ratio: 1; border-radius: 50%; box-sizing: border-box; }
.mac-shot .plights i:nth-child(1) { background: #ee6a5f; border: 1px solid #ce4e43; }
.mac-shot .plights i:nth-child(2) { background: #f5bf4f; border: 1px solid #d6a143; }
.mac-shot .plights i:nth-child(3) { background: #62c655; border: 1px solid #52a843; }
/* 밝은 판, 어두운 판 화면(라이브 .shot-light, .shot-dark 와 같은 규칙). 한 장만 있으면 그 한 장이 늘 보인다 */
.mac-shot > img.shot-dark { display: none !important; }
html[data-theme="dark"] .mac-shot > img.shot-light:not(:only-of-type) { display: none !important; }
html[data-theme="dark"] .mac-shot > img.shot-dark { display: block !important; }
.mac-shot > img { display: block; width: 100%; height: auto; border-radius: 3px 3px calc(var(--mr) - var(--mb)) calc(var(--mr) - var(--mb)); }
/* 누르면 확대: 호버 때 살짝 떠오르고, 누르면 화면 가운데로 커지고(뒤는 어둡게), 다시 누르거나 Esc 로 제자리로 */
.mac-shot.zoomable { cursor: zoom-in; transition: transform .25s ease, box-shadow .25s ease; }
.mac-shot.zoomable:hover { transform: translateY(-4px); box-shadow: 0 38px 80px rgba(0, 0, 0, .28), inset 0 0 0 1px #2c3236; }
.mac-shot.zoomable:focus-visible { outline: 2px solid #2f6b46; outline-offset: 4px; }
.shot-zoom-bg { position: fixed; inset: 0; z-index: 60; background: rgba(10, 18, 12, .6); opacity: 0; transition: opacity .35s ease; cursor: zoom-out; }
.shot-zoom-bg.on { opacity: 1; }
.mac-shot.shot-zoom { position: fixed; z-index: 61; margin: 0; cursor: zoom-out; transition: none; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .mac-shot.zoomable, .shot-zoom-bg { transition: none; } .mac-shot.zoomable:hover { transform: none; } }
/* 휴대폰 영상과 재생 단추(10-21 시안, phone-video.js. Y 22:57 "재생버튼 마련해서, 그걸 누르면 보이도록 해줘"): 휴대폰 폭(pv-on)에서 그 테마의 영상이 있으면(pv-ok-*)
   그 테마 그림 대신 영상 자리(첫 장 + 가운데 재생 단추). 영상이 없는 테마는 그림 그대로. Reader, Memo(figure.mac-shot)와 Explorer(.spot-stage)가 같이 쓴다 */
.pv { display: none; position: relative; }
.pv > video { display: none; width: 100%; height: auto; aspect-ratio: 1040 / 578; object-fit: cover; background: #15181a; cursor: pointer;
  border-radius: 3px 3px calc(var(--mr) - var(--mb)) calc(var(--mr) - var(--mb)); }
html:not([data-theme="dark"]) .pv-on.pv-ok-light > .pv, html[data-theme="dark"] .pv-on.pv-ok-dark > .pv { display: block; }
html:not([data-theme="dark"]) .pv-on.pv-ok-light > .pv > video.shot-light, html[data-theme="dark"] .pv-on.pv-ok-dark > .pv > video.shot-dark { display: block; }
html:not([data-theme="dark"]) .pv-on.pv-ok-light > img.shot-light, html[data-theme="dark"] .pv-on.pv-ok-dark > img.shot-dark { display: none !important; }
/* 재생 단추: 숲 악센트 원(밤은 밝은 초록, spotlight-shot.css .spot-tag 와 같은 짝). 흰 테두리로 어느 첫 장 위에서도 떠 보이게. 누르면 살짝 눌린다 */
.pv-btn { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: #1e6e43; color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 10px 26px rgba(0, 0, 0, .3); cursor: pointer;
  transition: opacity .2s ease, transform .16s ease-out; -webkit-tap-highlight-color: transparent; }
.pv-btn svg { width: 24px; height: 24px; display: block; }
.pv-btn[data-st="play"] svg { margin-left: 3px; }   /* 세모는 무게가 왼쪽에 쏠려 보여 조금 오른쪽으로(보이는 가운데) */
.pv-btn:active { transform: scale(.94); }
.pv-btn:focus-visible { outline: 2px solid #1e6e43; outline-offset: 5px; }
html[data-theme="dark"] .pv-btn { background: #9bcca9; color: #0d100e; box-shadow: 0 0 0 3px rgba(13, 16, 14, .88), 0 10px 26px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .pv-btn:focus-visible { outline-color: #9bcca9; }
.pv.pv-playing .pv-btn { opacity: 0; transform: scale(.9); pointer-events: none; }
/* 끝나면 끝 장면(세 칸을 잇는 그림)을 가리지 않게 다시 보기는 오른쪽 아래 구석에 작게 */
.pv-btn[data-st="replay"] { left: auto; top: auto; right: 10px; bottom: 10px; width: 42px; height: 42px; margin: 0; }
.pv-btn[data-st="replay"] svg { width: 20px; height: 20px; }
/* 받는 동안: 단추 둘레를 도는 호 */
.pv.pv-wait .pv-btn::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid transparent; border-top-color: #1e6e43; animation: pv-spin .8s linear infinite; }
html[data-theme="dark"] .pv.pv-wait .pv-btn::after { border-top-color: #9bcca9; }
@keyframes pv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pv-btn { transition: none; } .pv.pv-wait .pv-btn::after { animation-duration: 2.4s; } }