/* 📷 동작 사진 — 사이드바 섹션 + 오른쪽 열 목록(#photoView) + 한 장씩 보기 팝업 (js/photo-sets.js) */
.toc-ps-section[hidden] { display: none; }
.toc-ps-section { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--h8-color-border-light, #ece8e5); }
.toc-ps-section .toc-section-header { cursor: pointer; }
.toc-ps-section.expanded .toc-section-chevron { transform: rotate(180deg); }
.toc-ps-body { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .25s ease, opacity .2s ease; }
.toc-ps-section.expanded .toc-ps-body { max-height: none; opacity: 1; }
.toc-ps-list { list-style: none; margin: 0; padding: 2px 4px 2px 12px; }
/* 분류 줄엔 카메라 아이콘을 두지 않는다(요청됨 2026-09-15 — 카메라는 섹션 제목 「동작 사진」에만). 글자는 인체자료집 챕터 줄과 같은 선에 */
.toc-ps-item { display: flex; align-items: center; gap: 6px; padding: 5px 8px 5px 20px; font-size: 12.5px; color: var(--h8-color-text, #222); cursor: pointer; border-radius: var(--h8-radius-sm, 6px); transition: background .15s; }
.toc-ps-item:hover { background: var(--h8-color-bg-hover, #f3f1ef); }
.toc-ps-item.active { background: var(--h8-color-primary-light, rgba(201, 165, 93, .12)); color: var(--h8-color-primary, #b08a3e); }
.toc-ps-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc-ps-count { font-size: 10px; color: var(--h8-color-text-muted, #999); flex: none; }

/* 오른쪽 열 목록 — 인체자료집 그리드와 같은 자리·같은 열 수(4 / 769~1100px 3 / 모바일 2) */
.ps-view { width: 100%; }
/* 머리글(「동작 사진 N세트 · N장」 + 설명)은 2026-09-20 요청으로 없앴다 — .ps-view-sub 는 「볼 수 있는 동작 사진이 아직 없습니다」에 남아 쓴다 */
.ps-view-sub { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--h8-color-text-muted, #888); }
.ps-cat { padding-top: 22px; scroll-margin-top: calc(var(--h8-header-height, 56px) + var(--h8-tab-bar-height, 0px) + 10px); }
.ps-cat + .ps-cat { margin-top: 14px; border-top: 1px solid var(--h8-color-border-light, #f0ebe8); }
.ps-cat-name { display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; font-size: 16px; font-weight: 700; color: var(--h8-color-text, #222); }
.ps-cat-name span { font-size: 12px; font-weight: 500; color: var(--h8-color-text-muted, #999); }
/* A안 「촘촘한 사진첩」(2026-09-15 채택) — 분류 하나 = 한 판, 6열(769~1100px 4열 · 모바일 3열), 사람 부분만 잘라 칸에 꽉 */
.ps-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 8px; margin-top: 10px; }
/* 테두리는 border 로 — inset 그림자는 표지의 흰 바탕(.ps-thumb.ok)에 덮여 글자 띠 둘레에만 남았다 */
/* ⚠ display:flex(column) 로 두지 말 것 — 표지 칸(.ps-thumb)이 flex 항목이 되면 폭이 stretch 로만
   정해져 iOS 사파리가 aspect-ratio 로 높이를 못 끌어낸다(0×0 이 되어 글자 줄만 남았다, 2026-09-20
   실기기 진단으로 확인 — 데스크톱 WebKit·크롬은 정상이라 헤드리스로는 재현되지 않는다).
   block 이면 표지 칸의 폭이 처음부터 확정돼 어느 브라우저에서나 같은 높이가 나온다. */
.ps-item { font: inherit; display: block; padding: 0; border: 1px solid var(--h8-color-border-light, #ece8e5); background: var(--h8-color-bg-card, #fff); border-radius: 8px; overflow: hidden; cursor: pointer; text-align: left; transition: border-color .15s ease, box-shadow .15s ease; }
.ps-item:hover { border-color: var(--h8-color-text, #2d2a29); box-shadow: 0 0 0 1px var(--h8-color-text, #2d2a29); }
.ps-item:focus-visible { outline: 2px solid #5d6f8c; outline-offset: 2px; }
@media (hover: none) { .ps-item:hover { border-color: var(--h8-color-border-light, #ece8e5); box-shadow: none; } }
.ps-thumb { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: linear-gradient(90deg, #f5f3f2 25%, #faf9f8 50%, #f5f3f2 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; }
.ps-thumb.ok { background: #fff; animation: none; }   /* 누끼라 투명한 곳에 스켈레톤 무늬가 비치지 않게 — 표지가 뜨면 흰 바탕 */
.ps-thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.ps-thumb img.trim { object-fit: fill; max-width: none; max-height: none; }   /* 사람 영역만 칸에 꽉(위치·크기는 js 가 % 로) */
.ps-thumb img:not([src]) { visibility: hidden; }
/* 스켈레톤은 표지를 사람 영역(또는 보이는 영역)에 맞춰 다시 놓은 뒤에 걷는다(요청됨 2026-09-15) — 받는 중·재조정 전 그림은 안 보인다 */
.ps-thumb:not(.ok) img { visibility: hidden; }
/* ★ iOS 사파리에서 표지 칸이 0×0 으로 납작해지던 것 (2026-09-20, 실기기 진단으로 확인)
   .ps-item·.ps-side-card 는 display:flex; flex-direction:column 이라 .ps-thumb 이 flex 항목이 된다.
   그 안에서 폭이 stretch 로만 정해지면 iOS 사파리는 aspect-ratio 로 높이를 못 끌어내 0 이 된다
   (데스크톱 WebKit·크롬은 정상이라 헤드리스로는 재현되지 않았다 — 폰이 직접 재서 알아냈다).
   → ::before 로 1:1 자리를 내용 흐름으로 확보한다. aspect-ratio 와 같은 값이라 서로 어긋나지 않고,
     block 부모(.ps-grid-card·.photoset-card)에는 안 걸리게 이 두 곳으로만 좁힌다. */
.ps-item > .ps-thumb::before,
.ps-side-card > .ps-thumb::before { content: ""; display: block; padding-top: 100%; }
/* 스켈레톤 = 영상 카드와 같은 것(style.css .card-loading / .card-skeleton / app.js _skelOut 스르륵 페이드 — 요청됨 2026-09-15).
   .card-skeleton 이 그림·글자를 묶은 카드 박스째 덮고, 표지를 다시 놓은 뒤 markReady 가 card-loaded(안쪽 cardFadeIn) + _skelOut */
.ps-item { position: relative; }
.ps-item.card-loading > :not(.card-skeleton), .ps-grid-card.card-loading > :not(.card-skeleton), .photoset-card.home-card.card-loading > :not(.card-skeleton) { opacity: 0; }
.ps-item.card-loaded > :not(.card-skeleton), .ps-grid-card.card-loaded > :not(.card-skeleton), .photoset-card.home-card.card-loaded > :not(.card-skeleton) { animation: cardFadeIn .3s ease-out; }
/* 🔄 새로고침으로 동작 사진 목록에 돌아올 때(html.boot-photos — index.html <head> 가 기록 칸을 보고 붙인다):
   첫 화면부터 인체자료집 그리드(4칸 스켈레톤)를 감추고 같은 6칸 사진 스켈레톤을 보인다 — 4칸이 떴다 6칸으로 바뀌던 것 */
html.boot-photos #videosGrid { display: none !important; }
html.boot-photos #photoView.hidden { display: block !important; }
.ps-boot { display: none; }
html.boot-photos .ps-boot { display: block; }
.ps-boot-line { height: 20px; width: 180px; border-radius: 6px; background: linear-gradient(90deg, #f0edeb 25%, #f7f5f4 50%, #f0edeb 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; }
.ps-boot-line.short { width: 110px; height: 16px; margin-top: 22px; }
.ps-item-n { position: absolute; top: 5px; right: 5px; font-size: 10.5px; line-height: 17px; padding: 0 6px; border-radius: 9px; color: #fff; background: rgba(0, 0, 0, .45); }
/* 동작·방향 = 한 줄에 나란히(2026-09-17 요청됨 — 두 줄일 필요 없음), 굵기와 색으로 구분.
   한 줄에 안 들어가면 말줄임 대신 방향만 다음 줄로(flex-wrap) — 둘 다 … 로 잘리면 읽을 수 없었다(모바일 3칸) */
.ps-cap { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; row-gap: 0; padding: 7px 8px 8px; border-top: 1px solid var(--h8-color-border-light, #f1ede9); }
.ps-mo, .ps-dir { display: block; min-width: 0; font-size: 12.5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-mo { flex: 0 1 auto; }
.ps-dir { flex: 0 1 auto; font-size: 11.5px; }
.ps-mo { font-weight: 700; color: var(--h8-color-text, #2d2a29); }
.ps-dir { font-weight: 600; color: #4f6a8f; }
.ps-msg-inline { margin: 10px 0; padding: 10px 12px; background: #fbeaea; color: #a33; font-size: 13px; }
@media (min-width: 769px) and (max-width: 1100px) { .ps-cards { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) {
  .ps-cards { grid-template-columns: repeat(3, 1fr); gap: 8px 6px; }
  .ps-cap { column-gap: 4px; padding: 5px 6px 6px; }
  .ps-mo { font-size: 11px; }
  .ps-dir { font-size: 10px; }
}

/* 통합 팝업 안 플레이어(.up-content.up-photoset > .psp — photo-sets.js mountPlayer). 창·메모·저장·‹ ›는 영상과 같은 통합 팝업 것 */
.psp { position: absolute; inset: 0; background: #fff; }
.psp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; transition: opacity .3s ease; }
/* 전 장을 받아 틀(합친 사람 영역)까지 정해질 때까지 스켈레톤만 — 그 뒤 한 번에 스르륵(따닥거림 없이) */
.psp.loading .psp-canvas { opacity: 0; }
/* 플레이바 = 영상 팝업과 같은 .anim-bar(style.css) — 받는 동안엔 마우스를 움직여도 안 뜬다 */
.psp.loading .anim-bar { opacity: 0 !important; pointer-events: none !important; }
.psp-msg { z-index: 4; }
.psp-msg { position: absolute; left: 14px; bottom: 60px; font-size: 12px; color: #6b6562; background: rgba(255, 255, 255, .9); padding: 4px 10px; border-radius: 12px; }
.psp-msg[hidden] { display: none; }
.psp-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; background: rgba(255, 255, 255, .9); border: 1px solid rgba(0, 0, 0, .08); border-radius: 22px; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.psp-play { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #2d2a29; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.psp-play svg { width: 14px; height: 14px; }
.psp-range { flex: 1; min-width: 0; accent-color: #2d2a29; cursor: pointer; }
.psp-count { flex: none; min-width: 52px; text-align: right; font-size: 12px; color: #555; font-variant-numeric: tabular-nums; }

/* 🛠 통합 팝업 관리자 바 아래 — 사진 한 장씩 고르기(photo-sets.js adminFrames, 관리자만). 체크한 사진만 고객에게 */
.ps-admin-frames { margin: 0 0 14px; padding: 10px; border: 1px solid #e3e8f0; border-radius: 10px; background: #f8fafc; font-size: 12px; }
.paf-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.paf-head b { font-size: 12.5px; color: #334155; }
.paf-sum { color: #475569; }
.paf-crop { margin-left: auto; color: #2563eb; font-size: 11px; text-decoration: none; white-space: nowrap; }
.paf-crop:hover { text-decoration: underline; }
.paf-msg { flex-basis: 100%; font-size: 11px; }
.paf-msg:empty { display: none; }
.paf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 6px; }
.paf-it { position: relative; display: block; border: 2px solid #2f6fd0; border-radius: 6px; overflow: hidden; cursor: pointer; background: #fff; }
.paf-it input { position: absolute; top: 3px; left: 3px; z-index: 3; margin: 0; width: 15px; height: 15px; accent-color: #2f6fd0; cursor: pointer; }
.paf-no { position: absolute; right: 3px; bottom: 2px; z-index: 3; font-size: 10px; line-height: 14px; color: #475569; background: rgba(255, 255, 255, .88); border-radius: 6px; padding: 0 4px; }
.paf-it.off { border-color: #e2e8f0; }
.paf-it.off .ps-thumb { opacity: .3; }
.paf-it.off::after { content: '✕'; position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; color: #dc2626; font-size: 22px; font-weight: 700; pointer-events: none; }
.paf-it.busy { opacity: .6; pointer-events: none; }
/* ★ 목록 표지로 쓸 장 — 누르면 지정, 지정한 장을 다시 누르면 자동(가운데 장). 자동 표지는 옅은 ☆ 로 표시 */
.paf-cover { position: absolute; top: 2px; right: 2px; z-index: 3; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .88); color: #94a3b8; font-size: 13px; line-height: 20px; text-align: center; cursor: pointer; }
.paf-cover:hover { color: #d97706; }
.paf-it.cover .paf-cover { background: #f59e0b; color: #fff; }
.paf-it.cover-auto .paf-cover { color: #f59e0b; }
.paf-it.cover { box-shadow: 0 0 0 2px #f59e0b; }
.paf-it.off .paf-cover { display: none; }
.ps-admin-frames.disabled .paf-grid { opacity: .5; pointer-events: none; }
/* 🔆 밝기·대비(관리자 — 사진 고르기 칸 위). 사진 파일은 그대로, 사이트가 그릴 때만 입힌다 */
.paf-tone { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 8px; padding: 8px 10px; border: 1px solid #e3e8f0; border-radius: 8px; background: #fff; }
.paf-tone b { font-size: 12.5px; color: #334155; }
.paf-tone label { display: inline-flex; align-items: center; gap: 6px; color: #475569; }
.paf-tone input[type=range] { width: 120px; accent-color: #2f6fd0; cursor: pointer; }
.paf-tone .pt-v { min-width: 38px; font-variant-numeric: tabular-nums; color: #0f172a; }
.paf-tone button { padding: 3px 9px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; font-size: 11.5px; cursor: pointer; }
.paf-tone button:hover { border-color: #2f6fd0; color: #2f6fd0; }
.paf-tone .pt-adv { font-size: 11px; color: #a16207; flex-basis: 100%; }   /* 🔆 고급 보정(리뷰어에서 정함)이 걸려 있음을 알린다 */
.paf-tone .pt-msg { font-size: 11px; color: #15803d; }
.paf-tone .pt-msg.bad { color: #b91c1c; }

/* 「내 저장」 폴더 카드(app.js renderFolderView → PhotoSets.cardHtml) — 폴더 칸(.home-card-thumb)을 꽉 채우는 표지.
   ⚠ style.css `.home-card-thumb img`(사전 카드용 60%·z-index 1)를 이겨야 한다 — 선택자 두 단계로 */
.photoset-card .home-card-thumb { background: #fff; }
.photoset-card .ps-thumb { position: absolute; inset: 0; aspect-ratio: auto; }
.home-card-thumb .ps-thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; z-index: auto; max-width: none; max-height: none; }
.home-card-thumb .ps-thumb img.trim { object-fit: fill; }

/* 🔎 학습하기 검색 결과 그리드의 사진 세트 카드(PhotoSets.gridCardHtml ← app.js renderVideosGrid 검색 모드).
   영상 카드와 같은 칸·같은 결(정사각 한 장) — 그리드에선 카드 아래 정보줄이 숨으므로 동작·방향은 그림 안 아래 띠에. */
.ps-grid-card { position: relative; background: var(--h8-color-bg-card, #fff); border-radius: var(--h8-radius-lg, 12px); overflow: hidden; box-shadow: var(--h8-shadow-sm); cursor: pointer; transition: transform var(--h8-transition-fast, .15s), box-shadow var(--h8-transition-fast, .15s); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ps-grid-card:hover { transform: translateY(-4px); box-shadow: var(--h8-shadow-md); }
@media (hover: none) { .ps-grid-card:hover { transform: none; box-shadow: var(--h8-shadow-sm); } }
.ps-grid-thumb { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; }
.ps-grid-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 10px 8px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .94) 45%); pointer-events: none; }
.ps-grid-cap { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; row-gap: 0; }
.ps-grid-cap b, .ps-grid-cap i { display: block; min-width: 0; font-style: normal; font-size: 12.5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-grid-cap b { flex: 0 1 auto; }
.ps-grid-cap i { flex: 0 1 auto; font-size: 11.5px; }
.ps-grid-cap b { font-weight: 700; color: var(--h8-color-text, #2d2a29); }
.ps-grid-cap i { font-weight: 600; color: #4f6a8f; }
/* ⚠ 여기에 색을 깔지 말 것 — 블러 표지는 누끼(배경 투명)라 깔린 색이 사람 주변으로 비쳐,
   같은 세트가 목록에선 하얗고 검색에선 푸르게 보였다(2026-09-21 실측 244,246,249 ↔ 255,255,255).
   잠김은 자물쇠 아이콘과 블러로 이미 드러난다. 배경은 .ps-thumb.ok 의 흰색 그대로. */
@media (max-width: 768px) {
  .ps-grid-cap { padding: 14px 7px 6px; }
  .ps-grid-cap { column-gap: 4px; }
  .ps-grid-cap b { font-size: 11px; }
  .ps-grid-cap i { font-size: 10px; }
}

/* 🎞 사진 팝업 플레이바 = 얇은 필름 띠(2026-09-16 요청됨, 시안 B — tools/planning/umu3qae72.html).
   동작·클래스는 영상 바(style.css .anim-bar …) 그대로 쓰고 여기서는 모양만 덮는다: 카드 없이 바닥에 붙는 띠 + 장면이 늘어선 필름. */
.psp .anim-bar { left: 0; right: 0; bottom: 0; padding: 20px 10px 8px; gap: 7px; align-items: flex-end; background: linear-gradient(transparent, rgba(255,255,255,.93) 38%); border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.psp .anim-bar-play { background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(0,0,0,.14); border-radius: 50%; }
.psp .anim-frame-info { color: #777; flex: none; font-variant-numeric: tabular-nums; text-align: right; }   /* 폭은 JS 가 총 장수 자릿수로 고정(width: Nch) */
/* ★옆으로 밀리지 않는다 — 폭에 들어가는 만큼만 칸을 고르게 뽑고(photo-sets.js fillFilm) 지금 장은 빨간 위치 선(상세페이지 사진 뷰어와 같은 규칙, 2026-10-09) */
.ps-film { flex: 1; min-width: 0; position: relative; display: flex; align-items: flex-end; gap: 2px; padding-bottom: 2px; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ps-cell { flex: 1 1 0; min-width: 0; position: relative; height: 34px; background: #efeae7; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.18) inset; }
.ps-cell img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ps-head { position: absolute; top: 0; bottom: 2px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--h8-color-primary, #bb5d5d); box-shadow: 0 0 0 1.5px #fff; pointer-events: none; z-index: 2; }
/* ⧉ 겹쳐보기 — 글자 없이 아이콘만(요청됨) */
.ps-onion { flex: none; font-size: 13px; line-height: 1; padding: 6px 8px; border-radius: 6px; cursor: pointer; color: #666; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.ps-onion:hover { background: rgba(0,0,0,.05); }
.ps-onion.on { color: #fff; background: #2d2a29; }
@media (max-width: 480px) { .psp .anim-bar { padding: 18px 8px 7px; gap: 5px; } .ps-onion { padding: 6px 6px; } .psp .anim-frame-info { min-width: 26px; font-size: 10.5px; } }

/* 🆓 무료 세트 · 🌫 잠긴 세트(2026-09-17, 요청됨 — 인체자료집 영상·합성과 같은 결)
   비구매자에게 무료가 아닌 세트는 블러 표지(photo-blur/<폴더>.webp — 서버가 카드 모양대로 구운 흐린 한 장) + 자물쇠. 누르면 구매 안내 */
.ps-thumb img.ps-blur { object-fit: cover; }
.ps-thumb.ps-noblur { background: #fff; }   /* 블러 표지가 아직 없으면 흰 판 + 자물쇠 — 색을 깔지 않는다(요청됨 2026-09-21) */
.ps-item.ps-locked .video-lock-icon, .ps-grid-locked .video-lock-icon { z-index: 1; }
.ps-item.ps-locked .video-lock-icon { width: 44px; height: 44px; }
@media (max-width: 768px) { .ps-item.ps-locked .video-lock-icon { width: 34px; height: 34px; } .ps-item.ps-locked .video-lock-icon svg { width: 20px; height: 20px; } }

/* 👁 통합 팝업 고객 사이드의 사진 세트 칸(다른 방향 · 관련 자료) — .ps-item 이 아니다(팝업 ‹ › 순서에 안 들어가게). 스켈레톤 규약은 같다 */
/* 같은 이유로 block — 위 .ps-item 주석 참조 */
.ps-side-card { font: inherit; position: relative; display: block; padding: 0; border: 1px solid #ece6e2; background: #fff; border-radius: 8px; overflow: hidden; cursor: pointer; text-align: left; }
.ps-side-card:hover { border-color: #bdb4af; }
.ps-side-card.on { border-color: #2d2a29; box-shadow: 0 0 0 1px #2d2a29; cursor: default; }
.ps-side-card.card-loading > :not(.card-skeleton) { opacity: 0; }
.ps-side-card.card-loaded > :not(.card-skeleton) { animation: cardFadeIn .3s ease-out; }
.ps-side-t { font-size: 11px; line-height: 1.3; padding: 3px 6px 4px; color: #444; }
.up-cs-rel-im.ps-side-card { border: 0; border-radius: 6px; }

/* 🎞 카드 hover 스크럽(photo-sets.js bindScrub) — 미리 구운 한 장에서 잘라 그린 캔버스를 표지 위에. 첫 칸이 그려진 뒤에만 보인다(.ps-scrubbing) */
/* ⚠ 캔버스에 바탕색을 주지 말 것 — 보정(🔆)이 이 캔버스의 CSS filter 라 흰 바탕까지 같이 걸려,
   노출을 내린 세트(ex < 0)는 흰 바탕이 회색이 된다(실제 사고 — 어깨관절 굽힘 등 37세트).
   팝업(.psp)·필름 칸(.ps-cell)과 같은 규율: 바탕은 걸리지 않는 부모(.ps-thumb.ok = #fff)가 맡고 캔버스는 투명,
   대신 스크럽 중엔 밑에 깔린 정지 표지를 감춘다(안 감추면 두 장이 겹쳐 보인다). */
.ps-thumb .ps-scrub-cv { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; opacity: 0; pointer-events: none; z-index: 2; }
.ps-thumb.ps-scrubbing .ps-scrub-cv { opacity: 1; }
.ps-thumb.ps-scrubbing img { visibility: hidden; }
.ps-thumb .ps-scrub-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #bb5d5d; z-index: 3; pointer-events: none; opacity: 0; }
.ps-thumb.ps-scrubbing .ps-scrub-bar { opacity: .9; }

/* ── 🧭 같은 동작 · 다른 방향 패널(2026-10-09 — photo-sets.js mountDirs) ──
   통합 팝업 .up-left 안, 플레이어(#upContent) 옆에. 가로 화면 = 오른쪽 세로 칸 · 세로 화면(폰·아이패드 세로) = 아래 가로 줄.
   정사각 플레이어는 패널 몫(236px)만큼 폭을 내주고, 높이는 화면 높이 − .up-left 위아래 여백(40px×2)을 넘지 않는다. */
.up-left.ps-has-dirs { gap: 16px; }
.up-left.ps-has-dirs > .up-content {
  height: auto; max-height: none; flex: none;
  width: min(calc(100% - 236px), calc(100vh - 80px));
}
.ps-dirs { flex: none; min-width: 0; max-width: 100%; box-sizing: border-box; width: 220px; align-self: center; max-height: min(calc(100vh - 80px), 100%); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px; scrollbar-width: thin; }
.ps-dirs-h { display: flex; flex-direction: column; gap: 2px; }
.ps-dirs-h .act { font-size: 14px; font-weight: 700; color: #2d2a29; line-height: 1.35; word-break: keep-all; }
.ps-dirs-h .sub { font-size: 11.5px; color: #8b827d; }
.ps-dirs-grid { min-width: 0; display: grid; grid-template-columns: repeat(var(--ps-cols, 2), var(--ps-tile, 1fr)); gap: 8px; justify-content: start; }
.ps-dirs .ps-dir { font: inherit; position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; cursor: pointer; text-align: center; min-width: 0; }
.ps-dirs .ps-dir.on { box-shadow: none; }
.ps-dir .ps-thumb { position: relative; display: block; box-sizing: border-box; width: 100%; align-self: stretch; flex: none; aspect-ratio: 1 / 1; border: 1px solid #e8e1dd; border-radius: 9px; background: #fff; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
/* 아이패드 사파리에서 칸 그림이 점처럼 작아지던 것(2026-10-16 실제 사진) — 버튼(flex 세로) 안 aspect-ratio 칸이 늘어나지 않아 폭·높이 0. width 100% 를 직접 준다 */
@supports not (aspect-ratio: 1 / 1) { .ps-dir .ps-thumb { height: 0; padding-bottom: 100%; } }
.ps-dir .card-skeleton { border-radius: 9px; bottom: 20px; }
.ps-dir b { display: block; font-size: 11.5px; font-weight: 500; color: #7c736e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 16px; }
.ps-dir:hover .ps-thumb { border-color: #bdb4af; }
.ps-dir.on .ps-thumb { border-color: #bb5d5d; box-shadow: 0 0 0 2px #bb5d5d; }
.ps-dir.on b { color: #bb5d5d; font-weight: 700; }
.ps-dir.on { cursor: default; }
.ps-dirs-spins { display: flex; flex-direction: column; gap: 6px; }
.ps-dir-spin { font: inherit; display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: 10px; border: 1.5px solid #e0d9d5; background: #fff; font-size: 13px; font-weight: 700; color: #5c534e; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.ps-dir-spin svg { width: 15px; height: 15px; flex: none; }
.ps-dir-spin:hover { border-color: #bdb4af; }
.ps-dir-spin.on { background: #bb5d5d; border-color: #bb5d5d; color: #fff; cursor: default; }
/* 🔄 360도 칸 — 방향 칸과 같은 모양 + 표지 왼쪽 위 꼬리표 */
.ps-dir .ps-360 { position: absolute; left: 5px; top: 5px; z-index: 3; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px 2px 4px; border-radius: 9px; background: rgba(45,42,41,.82); color: #fff; font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 14px; pointer-events: none; }
.ps-dir .ps-360 svg { width: 10px; height: 10px; flex: none; }
/* 🔗 관련 해부학 — 방향 칸 아래(카드 모양은 unified-popup.css .up-cs-rel 그대로) */
.ps-dirs-rel { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding-top: 10px; border-top: 1px solid #ece6e2; }
.ps-dirs-rh { font-size: 12.5px; font-weight: 700; color: #2d2a29; }
/* 관련 해부학 카드도 방향 칸과 같은 모양(정사각 표지 + 아래 이름) — 표지에 라벨 글자가 보이게 크게(2026-10-14 요청됨) */
.ps-dirs-rel .up-cs-rels { display: grid; grid-template-columns: repeat(var(--ps-cols, 2), var(--ps-tile, 1fr)); gap: 8px; }
.ps-dirs-rel .up-cs-rel { min-width: 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 0; border: 0; background: none; text-align: center; }
.ps-dirs-rel .up-cs-rel-im { width: 100%; height: auto; aspect-ratio: 1 / 1; border: 1px solid #e8e1dd; border-radius: 9px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.ps-dirs-rel .up-cs-rel-im > img { object-fit: contain; }
.ps-dirs-rel .up-cs-rel:hover .up-cs-rel-im { border-color: #bdb4af; }
.ps-dirs-rel .up-cs-rel-tx { font-size: 11.5px; color: #7c736e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-dirs-rel .up-cs-rel-ty { display: none; }
.ps-dirs-rel .up-cs-rel.on .up-cs-rel-im { border-color: #bb5d5d; box-shadow: 0 0 0 2px #bb5d5d; }
.ps-dirs-rel .up-cs-rel.on .up-cs-rel-tx { color: #bb5d5d; font-weight: 700; }
.ps-dirs-rel.ghost { opacity: .6; }
.ps-dirs-empty { font-size: 11.5px; color: #8b827d; line-height: 1.45; }
@media (max-width: 1100px) {
  .up-left.ps-has-dirs > .up-content { width: min(calc(100% - 236px), calc(100vh - 48px)); }
  .ps-dirs { max-height: min(calc(100vh - 48px), 100%); }
}
/* 세로 화면 — 플레이어 왼쪽 + 오른쪽 세로 1열에 「다른 방향」과 「관련 해부학」을 위아래로 이어서
   (2026-10-15 요청됨 — 광고 편집기 릴스 tools/reel/tour-01-c2.html 세 번째(무릎) 팝업처럼 「다른 각도 · 관련 해부학」 한 줄.
    그 전(10-14)엔 관련 해부학이 플레이어 아래 가로 줄이라 그 아래가 통째로 비었다).
   열 높이 = 버튼 줄 아래~화살표 위 전부(height:0 + min-height:100%), 넘치면 그 열만 세로 스크롤. 사진은 열 위 끝에 맞춰 위에 붙는다
   (열을 사진 높이로 묶었더니 관련 해부학이 스크롤 아래로 숨었다). */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  .up-left.ps-has-dirs { display: grid; --ps-dcol: clamp(56px, 14vw, 88px);   /* 2026-10-15 줄임 — 칸이 커서 사진이 작아 보였다 */ grid-template-columns: minmax(0, 1fr) var(--ps-dcol);
    grid-template-rows: minmax(0, 1fr);
    align-content: start; column-gap: 8px; row-gap: 0; padding-left: 8px !important; padding-right: 8px !important;
    /* 위 = 떠 있는 버튼 줄(높이 36 + 12) 아래, 아래 = ‹ › 화살표(높이 44 + 14) 자리 */
    padding-top: calc(58px + env(safe-area-inset-top, 0px)) !important; padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; overflow-y: auto; }
  .up-left.ps-has-dirs > .up-content { grid-row: 1; grid-column: 1; width: 100%; align-self: center; }   /* 사진은 세로 가운데(2026-10-15 요청됨) */
  .ps-dirs { grid-row: 1; grid-column: 2; width: 100% !important; max-width: none; max-height: none; height: 0; align-self: stretch;
    /* 아래는 화살표 자리(padding-bottom 70)까지 내려 바닥 8px 에서 끝 — 화살표는 가운데라 안 겹친다(2026-10-15 요청됨 — 「여기 여백 없도록」) */
    min-height: calc(100% + 62px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 6px; overflow-y: auto; overflow-x: hidden; padding: 2px; scrollbar-width: none; }
  .ps-dirs::-webkit-scrollbar { display: none; }
  .ps-dirs-h { display: none; }
  .ps-dirs-grid { display: flex; flex-direction: column; gap: 8px; flex: none; }
  .ps-dirs-grid::before { content: "다른 방향"; font-size: 10.5px; font-weight: 700; color: #8b827d; text-align: center; white-space: nowrap; line-height: 14px; }
  .ps-dir { flex: 0 0 auto; width: 100%; }
  .ps-dir b { font-size: 11px; }
  .ps-dirs-spins { flex-direction: column; }
  .ps-dir-spin { height: 34px; }
  /* 관련 해부학 = 같은 열, 다른 방향 아래 — 가는 선 하나로 나눈다 */
  .ps-dirs-rel { flex: none; margin-top: 4px; padding: 8px 0 0; gap: 8px; border-top: 1px solid #e8e1dd; }
  .ps-dirs-rh { font-size: 10.5px; font-weight: 700; color: #8b827d; text-align: center; white-space: nowrap; line-height: 14px; }
  .ps-dirs-rel .up-cs-rels { display: flex; flex-direction: column; gap: 8px; }
  .ps-dirs-rel .up-cs-rel { width: 100%; }
  .ps-dirs-rel .up-cs-rel-tx { font-size: 11px; }
  .ps-dirs-empty { font-size: 10.5px; text-align: center; }
}

/* 「다른 방향」 칸의 잠금 = 칸을 덮는 검은 원 대신 가운데 작은 자물쇠(2026-10-15 요청됨 — 「검은색으로 덮여 있는 게 어색」) */
.ps-dirs .ps-dir .video-lock-icon { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: 22px; height: 22px; background: rgba(45,42,41,.62); z-index: 1; }
.ps-dirs .ps-dir .video-lock-icon svg { width: 12px; height: 12px; stroke-width: 2.4; }
/* 좁은 세로 칸에선 360° 배지를 작게 — 칸 폭을 넘지 않게 */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  .ps-dirs .ps-dir .ps-360 { left: 4px; top: 4px; padding: 1px 5px; font-size: 9.5px; gap: 2px; max-width: calc(100% - 8px); }
  .ps-dirs .ps-dir .ps-360 svg { width: 9px; height: 9px; }
}