/* photos 화면 전용 스타일(2026-10-20 개편). brand.css 다음에 로드. 선택자는 #view-photos 로 한정한다.
   모션 = '세 풀이가 모인다': 머리의 삼합 배지 구슬이 촬영 저장 즉시 in-pop. F4(내 네 기둥)는 정지. 가이드(손금 3선·관상 5점)는 clip-path 와이프.
   움직이는 속성은 transform · opacity · clip-path 뿐. 모션 모드는 section[data-motion=full|short|none]. */

/* ── 머리: ‹ 이전 | 삼합 배지 + F4 | 나중에 / 아래 줄 단계 라벨 + 진행 띠 ── */
#view-photos .ob-top { grid-template-columns: 64px 1fr 64px; grid-template-rows: auto auto; height: auto; min-height: 44px; row-gap: 10px; align-items: center; }
#view-photos .ob-back, #view-photos .ob-skip { font-size: 15px; white-space: nowrap; align-self: start; }
#view-photos .ph-head { display: grid; justify-items: center; gap: 6px; min-width: 0; }
#view-photos .ph-head .src3.lg { gap: 10px; flex-wrap: wrap; justify-content: center; }
#view-photos .ph-head .f4 { --ink-stroke: 1.2px; }
#view-photos .ph-stepbar { grid-column: 1 / -1; }
#view-photos .ph-note { margin: 10px 0 0; text-align: center; font-size: 13px; line-height: 1.4; color: var(--muted); word-break: keep-all; }
/* 방금 저장돼 '사진만 있음'(반 채움)이 된 구슬도 in-pop (brand.css 는 .on.pop 만 재생) */
#view-photos .src3.lg .s.wait.pop::before { animation: in-pop .6s var(--ease-back) both; }

/* ── 단계 본문 ── */
#view-photos .ob-steps { min-height: 500px; }
#view-photos .ob-step { padding-top: 3vh; }
#view-photos .ob-hint { font-size: 15px; line-height: 1.5; margin-bottom: 22px; word-break: keep-all; }
#view-photos .ob-foot .ph-skip-long { display: block; width: 100%; margin: 8px 0 0; font-size: 14px; font-weight: 600; text-align: center; color: var(--cobalt); word-break: keep-all; }

/* ── 가이드 오버레이(인라인 SVG) ── */
#view-photos .ob-frame { overflow: hidden; }
#view-photos .ob-guide { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .4s var(--ease-expo); }
#view-photos .ob-photo.has .ob-guide { opacity: 0; } /* 촬영되면 가이드는 사라진다 */
#view-photos .ob-guide path { fill: none; stroke: var(--cobalt); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
#view-photos .ob-guide circle { fill: var(--cobalt); }
#view-photos .ob-guide .face { fill: none; stroke: var(--cobalt); stroke-width: 1.6; stroke-dasharray: 5 5; opacity: .55; }
#view-photos .ob-guide text { font: 700 11px var(--font); fill: var(--cobalt); paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round; }
/* 선 하나씩 왼쪽에서 오른쪽으로 와이프(stroke-dashoffset 금지). 단계가 켜질 때 재생, 180ms 스태거 */
#view-photos .ob-guide g { clip-path: inset(0 100% 0 0); }
#view-photos .ob-step.on .ob-guide g { animation: wipe-x .9s var(--ease-expo) both; animation-delay: calc(var(--i, 0) * 180ms + 260ms); }
#view-photos[data-motion=short] .ob-step.on .ob-guide g { animation-duration: .35s; animation-delay: calc(var(--i, 0) * 40ms + 120ms); }
#view-photos[data-motion=none] .ob-guide g, #view-photos[data-motion=none] .ob-step.on .ob-guide g { animation: none; clip-path: none; }
/* 빈 틀 점선 맥동(ob-pulse): brand.css 가 3회로 제한. 보이는 단계에서만 돌고, 단계 전환마다 3회 안에서 끝난다 */
#view-photos .ob-step:not(.on) .ob-frame::after { animation: none; }
#view-photos[data-motion=none] .ob-frame::after { animation: none; opacity: .55; transform: none; }

/* ── reduced-motion: 최종 상태만 ── */
@media (prefers-reduced-motion: reduce) {
  #view-photos .ob-guide g { animation: none !important; clip-path: none !important; }
  #view-photos .ob-guide { transition: none !important; }
  #view-photos .ob-photo.has .ob-guide { opacity: 0 !important; }
  #view-photos .src3.lg .s.wait.pop::before { animation: none !important; }
}