/* 에코스튜디오 공용 부품 — 「사진 바꾸기 한 동작」 모션(안 3 · #1508 · 대표 #1129).
   쓰는 곳: 본체 홈 03 운영 · /홈페이지제작/ · /landing/ (본판과 /k/ 같이).
   ☠ 이 CSS 를 한 페이지 안에 옮겨 적지 마십시오 — 여러 쪽이 함께 씁니다(부품 CSS 위치 규칙).
   틀(마크업)은 mu-plugins/eco-motion-edit.php 의 eco_motion_edit() 하나가 냅니다.
   기준 시험본: _teams/3팀_제작/모션히어로_안3_시험.html (t3-m3).
   단위는 무대 폭의 1%(cqw). 편집기 캡처 1568:652 · 휴대폰 화면 1:2(1170×2340).
   움직이는 값은 JS seek(t) 한 곳의 transform·opacity·clip-path 뿐 — 무한 box-shadow·filter 없음(#813). */
.eco-me{--me-paper:#f5f5f0;--me-ink:#20211f;--me-accent:#2457e8;--me-muted:#62655f;--me-line:#d6d8cf;
  container-type:inline-size;max-width:1200px;margin-inline:auto;color:var(--me-ink)}
.eco-me *,.eco-me *::before,.eco-me *::after{box-sizing:border-box}
.eco-me__stage{--sh:44;position:relative;height:calc(var(--sh)*1cqw);overflow:hidden;background:var(--me-paper);margin:0}
.eco-me__ed{position:absolute;left:6cqw;top:3.7cqw;width:88cqw;height:calc(88cqw*652/1568);border-radius:8px;overflow:hidden;
  border:1px solid var(--me-line);background:var(--me-ink);transform-origin:0 50%;
  box-shadow:0 1px 2px rgba(32,33,31,.06),0 10px 28px rgba(32,33,31,.08)}
.eco-me__zoom{position:absolute;inset:0;transform-origin:0 0}
.eco-me__ly{position:absolute;left:0;top:0;width:100%;height:100%;display:block;opacity:0;max-width:none}
.eco-me__ly--part{width:calc(100%*1364/1568);height:calc(100%*567/652)}
.eco-me__cur{position:absolute;left:-2px;top:-2px;width:20px;height:24px;transform-origin:2px 2px;pointer-events:none;overflow:visible}
.eco-me__ring{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border:2px solid var(--me-accent);border-radius:50%;opacity:0;pointer-events:none}
.eco-me__ph{position:absolute;left:66cqw;top:2.1cqw;width:21cqw;height:calc(18.8cqw*2 + 2.2cqw);padding:1.1cqw;border-radius:3.2cqw;background:var(--me-ink);opacity:0;
  box-shadow:0 1px 2px rgba(32,33,31,.08),0 12px 30px rgba(32,33,31,.12)}
.eco-me__scr{position:relative;width:100%;height:100%;border-radius:2.2cqw;overflow:hidden;background:#1a1612}
.eco-me__ed noscript img,.eco-me__scr noscript img{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
.eco-me__stage:not(.js) .eco-me__ph{visibility:hidden}
@container (max-width:639px){
  .eco-me__stage{--sh:132}
  .eco-me__ed{display:none}
  .eco-me__ph{left:19cqw;top:6.4cqw;width:62cqw;height:calc(57.2cqw*2 + 4.8cqw);padding:2.4cqw;border-radius:9cqw;opacity:1}
  .eco-me__scr{border-radius:6.8cqw}
  .eco-me__stage:not(.js) .eco-me__ph{visibility:visible}
}

/* 불러오기 실패 안내 — 한글 12px 하한 위(13px). 정지 단추는 #1581 로 뺐다 */
.eco-me__status{font-size:13px;line-height:1.5;color:var(--me-muted);margin:14px 0 0;text-align:right}
.eco-me__status[hidden]{display:none}

/* 어두운 구획(본체 홈 03 운영, 바탕 #20211f) — 무대는 종이색 판으로 두고 조작 줄 글자만 밝게 */
.eco-me--dark .eco-me__stage{border-radius:12px}
.eco-me--dark .eco-me__status{color:#c9cbc3}