/* 맨얼굴부터 완성까지 — 전체 화면 재생 (js/theater.js) */
.tp { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #fff; animation: tpIn .25s ease; }
@keyframes tpIn { from { opacity: 0; } to { opacity: 1; } }

.tp-bar { flex: none; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 var(--gut); border-bottom: 1px solid var(--line); }
.tp-bar b { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-x { width: 36px; height: 36px; margin-left: -8px; font-size: 28px; line-height: 1; color: var(--ink); }
.tp-cnt { flex: none; font-size: 12.5px; font-weight: 700; color: var(--sub); font-variant-numeric: tabular-nums; }

.tp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px var(--gut) 0; }
.tp-stage { max-width: 440px; margin: 0 auto; }
.tp-stage .vis.ph { margin: 0; width: 100%; border-radius: 16px; }
.tp-stage .ph-chips { justify-content: flex-start; }

.tp-prog { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; max-width: 440px; margin: 14px auto 0; }
.tp-prog i { height: 3px; border-radius: 2px; background: var(--gray-2); transition: background .4s ease; }
.tp-prog i.on { background: var(--accent); }

.tp-cap { max-width: 440px; margin: 16px auto 0; padding-bottom: 8px; }
.tp-cap h2 { font-size: 21px; font-weight: 800; letter-spacing: -.04em; line-height: 1.3; }
.tp-cap #tpp { margin-top: 8px; }
.tp-cap .tp-how { padding: 0; }
.tp-cap .tp-sec { padding: 14px 0 0; font-size: 15px; }
.tp-cap .tp-guide { padding: 0; }
.tp-cap .tp-how li { padding: 6px 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.tp-cap .tp-tip { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.tp-cap .tp-tip b { margin-right: 6px; color: var(--accent); font-weight: 800; }

.tp-dock { flex: none; display: flex; gap: 8px; max-width: 440px; width: 100%; margin: 0 auto; padding: 12px var(--gut) calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.tp-dock .btn { flex: 1; height: 48px; font-size: 15px; }
.tp-dock [hidden] { display: none; }

/* 룩 상세의 "맨얼굴부터 완성까지 보기" 버튼 (사진 왼쪽 아래) */
.tp-open { position: absolute; left: 14px; bottom: 14px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 11px; border-radius: 18px; background: rgba(255, 255, 255, .94); color: var(--ink); font-size: 13px; font-weight: 800; box-shadow: 0 2px 10px rgba(0, 0, 0, .16); }
.tp-open i { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--accent); }