/* 따라하기 — 포토 스텝형: STEP 진행바 · 큰 사진(점선 화살표 · TIP) · 제목/설명 · 내 화장품 · 하단 도크 */
.ph-prog { display: flex; align-items: center; gap: 10px; padding: 12px var(--gut) 0; font-size: 13px; font-weight: 600; color: var(--sub); }
.ph-prog b { color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }
.ph-prog .trk { flex: 1; height: 3px; border-radius: 2px; background: var(--gray-2); overflow: hidden; }
.ph-prog .trk i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width .5s cubic-bezier(.2, .8, .2, 1); }

.vis.ph { aspect-ratio: 4 / 5; margin-top: 10px; border-radius: 16px; background: #f3dcd8; }
.vis.ph.done { aspect-ratio: 4 / 5; }

/* 점선 화살표 */
@keyframes phflow { to { stroke-dashoffset: -40; } }

/* 사진 아래쪽 TIP 바 + 전체 얼굴 위치 썸네일 */
.ph-tip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: flex-end; gap: 10px; padding: 34px 12px 12px; background: linear-gradient(to top, rgba(40, 22, 22, .62), rgba(40, 22, 22, 0)); color: #fff; pointer-events: none; }
.vis.done .ph-tip { display: none; }
.ph-tip .th[hidden] { display: none; }
.ph-tip .th { flex: none; width: 58px; height: 72px; border-radius: 8px; border: 2px solid #fff; overflow: hidden; background: #f3dcd8; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.ph-tip .th svg { display: block; width: 100%; height: 100%; }
.ph-tip p { min-width: 0; font-size: 12.5px; line-height: 1.5; font-weight: 500; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.ph-tip p b { display: block; font-size: 11px; letter-spacing: .08em; font-weight: 800; color: #ffd0da; }
.ph-tip.no-text p { display: none; }

.ph-head { padding: 18px var(--gut) 4px; }
.ph-head h2 { font-size: 22px; font-weight: 800; letter-spacing: -.04em; line-height: 1.3; }
.ph-head p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--sub); }

.ph-prod { margin: 14px var(--gut) 0; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.ph-prod-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ph-prod-h b { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.ph-prod-h button { font-size: 12px; color: var(--sub); font-weight: 600; }
.ph-prod .cards { padding: 0; }
.ph-prod .pcard { border: 0; padding: 0; background: none; }
.ph-alt { margin: 0 var(--gut); }

.ph-more { margin: 14px 0 0; }
.ph-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; margin: 0 var(--gut); padding: 14px 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 700; }
.ph-more > summary::-webkit-details-marker { display: none; }
.ph-more > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: rotate(45deg); transition: transform .2s; }
.ph-more[open] > summary::after { transform: rotate(-135deg); }
.ph-more > .in { padding-bottom: 8px; }

/* 실사 얼굴: 두 장을 겹쳐 두고 새 사진이 준비되면 크로스페이드 */
.ph-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.ph-img.on { opacity: 1; }
.ph-img:not([src]) { visibility: hidden; }
.ph-tip .th img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }

.ph-ov { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .5s .2s; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45)); }
.ph-ov.in { opacity: var(--gop, 1); }
.vis.guide-off .ph-ov { display: none; }
/* 바르는 영역: 허용 부위 마스크로 잘린 반투명 색 */
.ph-ov .ga path { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .26; }
.ph-ov .ga { filter: saturate(1.6); }
.ph-ov .ga rect.all { opacity: .16; }
.ph-ov .gg path { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 22 18; marker-end: url(#ph-ar2); animation: phflow2 1.6s linear infinite; }
.vis.done .ph-ov { display: none; }
@keyframes phflow2 { to { stroke-dashoffset: -80; } }
.ph-ov .gg path.sm { stroke-width: 3.5; stroke-dasharray: 9 7; marker-end: url(#ph-ar3); }
@media (prefers-reduced-motion: reduce) { .ph-ov .gg path { animation: none; } }
#ph-ar2 path, #ph-ar3 path { stroke-dasharray: none; animation: none; }

.ph-tip .th { position: relative; }
.ph-tip .th[data-lbl]::after { content: attr(data-lbl); position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #fff; background: rgba(40, 22, 22, .55); }

/* 카메라: 사진 전체(이미지 · 붓 자국 · 화살표)를 한 덩어리로 확대·이동한다. 움직임은 스크립트가 매 프레임 맞춘다. 원점은 왼쪽 위 */
.ph-cam { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.ph-cam.snap, .ph-img.snap { transition: none; }

/* 도구가 바르는 층: 다음 단계 사진을 붓 자국 마스크로만 드러낸다 */
.ph-pt { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.ph-pt .pt-tool { transition: opacity .3s ease; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.ph-pt .pt-geo { opacity: 0; }

/* 단계 설명(글) */
.ph-motion { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--sub); }
.ph-sec { padding: 22px var(--gut) 0; font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }

/* 위쪽 칩 줄: 지금 하는 동작 · 다시 보기 · 전체/가까이 */
.ph-chips { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; }
.ph-btns { display: flex; gap: 6px; margin-left: auto; pointer-events: auto; }
.ph-chip { height: 28px; padding: 0 11px; border-radius: 14px; background: rgba(255, 255, 255, .92); color: #111; font-size: 11.5px; font-weight: 800; box-shadow: 0 2px 8px rgba(0, 0, 0, .14); white-space: nowrap; }
.ph-mo { flex: 1 1 auto; min-width: 0; min-height: 28px; display: flex; align-items: center; padding: 5px 11px; border-radius: 14px; background: rgba(20, 14, 14, .74); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1.35; opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .3s ease; backdrop-filter: blur(4px); }
.ph-mo.on { opacity: 1; transform: none; }
.vis.playing .ph-btns { display: none; }
.vis.done .ph-chips { display: none; }

/* 방향 안내: 칠할 획의 번호 원 · 글자 (화살표는 .ph-ov g path 가 맡는다) */
.ph-ov circle.gn { fill: rgba(20, 14, 14, .82); stroke: #fff; stroke-width: 3; }
.ph-ov text.gt { fill: #fff; font: 800 24px -apple-system, "Pretendard", sans-serif; text-anchor: middle; dominant-baseline: central; }
.ph-ov circle.gn.sm { stroke-width: 2; }
.ph-ov text.gt.sm { font-size: 13px; }
/* 가이드 켜기/끄기 · 투명도 */
.ph-gp { position: absolute; right: 10px; top: 44px; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, .95); box-shadow: 0 2px 10px rgba(0, 0, 0, .16); font-size: 11.5px; font-weight: 800; color: #111; }
.ph-gp[hidden] { display: none; }
.ph-gp input { width: 96px; accent-color: var(--accent); }
.vis.playing .ph-gp { display: none; }

/* 어디에 · 어떻게 · 어느 방향으로 (번호 목록) */
.guide-list { list-style: none; margin: 0; padding: 6px var(--gut) 0; }
.guide-list li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 7px 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.gnum { width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }

/* 화장을 마친 뒤 헤어 · 의상 */
.styled { margin: 16px var(--gut) 0; padding: 14px 16px; border-radius: 14px; background: var(--gray); }
.styled h3 { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.styled dl { display: grid; grid-template-columns: 52px 1fr; gap: 8px 10px; font-size: 14px; line-height: 1.6; margin: 0; }
.styled dt { font-weight: 800; color: var(--sub); }
.styled dd { margin: 0; color: var(--ink); }