/* 페이지 전환 — 시네마 셔터(assets/js/transition.js).
   위아래 바가 닫히면 가운데 타임라인(민트 수평선·눈금·재생 헤드)과 다음 장면 제목이 떠오르고,
   새 페이지에서 재생 헤드가 끝까지 간 뒤 바가 위아래로 열린다.
   .pt 의 기본 스타일 = 화면을 덮은 상태. .is-in 은 덮는 동작(이전 페이지), .is-out 은 여는 동작(새 페이지).
   색: 사이트 팔레트(common.css 배경·민트·글자)를 바탕으로, 관리자 컨트롤 룸(admin.css)의 장치 —
   REC 칩, 뷰파인더 모서리, 필름 그레인, 타임코드 — 를 얹는다. 빨강은 REC 신호에만, 민트는 타임라인과 장면 번호에만 쓴다. */
@property --pt-p{syntax:'<number>';inherits:true;initial-value:0}

.pt{--pt-edge:#040605;--pt-seam:#0d1311;--pt-rec:#ff4d4d;--pt-dim:rgba(164,173,166,.55);--pt-glow:rgba(94,234,212,.1);
  position:fixed;inset:0;z-index:2147483000;overflow:hidden;color:var(--text);font-family:var(--font-latin);pointer-events:auto;
  user-select:none;-webkit-user-select:none}
.pt.is-out{pointer-events:none}
.pt i,.pt em{display:block;font-style:normal}

/* 바: 바깥쪽은 더 깊은 검정, 맞닿는 가운데로 갈수록 사이트 배경보다 살짝 밝은 초록빛 검정.
   그 위에 필름 그레인과 가운데 민트 빛이 얹힌다. */
.pt-bar{position:absolute;left:0;right:0;height:50.5%;overflow:hidden}
.pt-bar:nth-child(1){top:0;background:linear-gradient(180deg,var(--pt-edge),var(--bg) 55%,var(--pt-seam))}
.pt-bar:nth-child(2){bottom:0;background:linear-gradient(0deg,var(--pt-edge),var(--bg) 55%,var(--pt-seam))}
.pt-bar::before,.pt-bar::after{content:'';position:absolute;inset:0;pointer-events:none}
.pt-bar::before{opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pt-bar:nth-child(1)::after{background:radial-gradient(55% 70% at 50% 100%,var(--pt-glow),transparent 70%)}
.pt-bar:nth-child(2)::after{background:radial-gradient(55% 70% at 50% 0,var(--pt-glow),transparent 70%)}

/* 뷰파인더 모서리 */
.pt-corner{position:absolute;width:26px;height:26px;border:0 solid rgba(243,245,241,.4)}
.pt-corner:nth-child(3){top:24px;left:24px;border-width:1.5px 0 0 1.5px}
.pt-corner:nth-child(4){top:24px;right:24px;border-width:1.5px 1.5px 0 0}
.pt-corner:nth-child(5){bottom:24px;left:24px;border-width:0 0 1.5px 1.5px}
.pt-corner:nth-child(6){bottom:24px;right:24px;border-width:0 1.5px 1.5px 0}

/* 가운데 타임라인: 옅은 기준선 + 진행만큼 차오르는 민트 선 + 프레임 눈금 + 재생 헤드. 진행도는 --pt-p(0~1). */
.pt-track{--pt-p:.62;--w:calc(100% - var(--gutter) * 2);position:absolute;left:0;right:0;top:50%;height:0}
.pt-line{position:absolute;left:0;right:0;top:-.5px;height:1px;background:rgba(94,234,212,.22)}
.pt-fill{position:absolute;left:var(--gutter);width:var(--w);top:-1px;height:2px;transform-origin:left;scale:var(--pt-p) 1;
  background:linear-gradient(90deg,rgba(94,234,212,0),rgba(94,234,212,.55) 40%,var(--mint));box-shadow:0 0 14px rgba(94,234,212,.35)}
.pt-ticks{position:absolute;left:var(--gutter);width:var(--w);top:7px;height:9px;
  background:repeating-linear-gradient(90deg,rgba(243,245,241,.34) 0 1px,transparent 1px 120px) 0 0/100% 9px no-repeat,
             repeating-linear-gradient(90deg,rgba(243,245,241,.14) 0 1px,transparent 1px 24px) 0 0/100% 4px no-repeat}
.pt-head{position:absolute;left:calc(var(--gutter) + var(--w) * var(--pt-p));top:-12px;width:2px;height:24px;margin-left:-1px;
  background:var(--mint);box-shadow:0 0 12px rgba(94,234,212,.8)}
.pt-head::before{content:'';position:absolute;left:50%;top:-5px;width:9px;height:9px;margin-left:-4.5px;rotate:45deg;border-radius:1px;background:var(--mint)}

/* 제목·장면 정보 */
.pt-title{position:absolute;left:0;right:0;bottom:calc(50% + 30px);display:flex;justify-content:center;overflow:hidden;padding-bottom:.08em;
  font:800 clamp(40px,10vw,184px)/.92 var(--font-latin);letter-spacing:-.045em;white-space:nowrap;text-shadow:0 0 80px rgba(94,234,212,.14)}
.pt-title span{display:block}
.pt-label{position:absolute;left:0;right:0;top:calc(50% + 36px);display:flex;justify-content:center;align-items:center;gap:14px}
.pt-label span{font:600 12px/1 var(--font-latin);letter-spacing:.32em;color:var(--mint)}
.pt-label em{display:flex;align-items:center;gap:14px;font:500 14px/1 var(--font-sans);letter-spacing:0;color:var(--muted)}
.pt-label em::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--pt-dim)}

/* 상하단 정보 줄 */
.pt-hud{position:absolute;top:32px;left:var(--gutter);right:var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  font:600 11px/1 var(--font-latin);letter-spacing:.22em;color:var(--muted);font-variant-numeric:tabular-nums}
.pt-hud>:last-child{justify-self:end}
.pt-meta{top:auto;bottom:32px;color:var(--pt-dim)}
.pt-scene em{display:inline;color:var(--pt-dim)}
.pt-tc{color:var(--text)}
/* REC: 관리자 상단 REC와 같은 칩(빨간 점 + 옅은 빨간 바탕). 빨강은 사이트 커서의 LIVE 점과 같은 #ff4d4d. */
.pt-rec{justify-self:start;display:flex;align-items:center;gap:8px;height:26px;padding:0 calc(10px - .14em) 0 9px;border-radius:6px;
  background:rgba(255,77,77,.12);color:var(--pt-rec);font-weight:700;letter-spacing:.14em}
.pt-rec::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--pt-rec);box-shadow:0 0 8px rgba(255,77,77,.6);animation:pt-rec 1.6s steps(1) infinite}

/* 덮는 동작(약 1.1초): 바가 닫히고 → 타임라인이 그어지며 재생 헤드가 출발하고 → 제목이 떠오른다. */
.pt.is-in .pt-bar:nth-child(1){animation:pt-from-top .75s var(--ease-in-out) both}
.pt.is-in .pt-bar:nth-child(2){animation:pt-from-bottom .75s var(--ease-in-out) both}
.pt.is-in .pt-track{animation:pt-play-in .7s cubic-bezier(.3,0,.3,1) .4s both}
.pt.is-in :is(.pt-line,.pt-ticks){animation:pt-scale-x .6s var(--ease-out) .45s both}
.pt.is-in .pt-head{animation:fade-in .3s .5s both}
.pt.is-in .pt-title span{animation:pt-char-in .65s var(--ease-out) calc(.38s + var(--i) * 22ms) both}
.pt.is-in :is(.pt-label,.pt-hud,.pt-corner){animation:fade-in .4s .5s both}
/* 여는 동작(약 1.35초): 재생 헤드가 끝까지 가고 → 제목이 위로 빠지고 → 타임라인이 접히며 바가 열린다. */
.pt.is-out .pt-track{animation:pt-play-out .45s var(--ease-in-out) forwards}
.pt.is-out .pt-title span{animation:pt-char-out .5s var(--ease-in-out) calc(.12s + var(--i) * 15ms) forwards}
.pt.is-out :is(.pt-label,.pt-hud,.pt-corner){animation:fade-out .3s .15s forwards}
.pt.is-out :is(.pt-line,.pt-fill,.pt-ticks){animation:pt-scale-x-out .45s var(--ease-in-out) .4s forwards}
.pt.is-out :is(.pt-line,.pt-fill,.pt-ticks){transform-origin:right} /* 재생 헤드가 멈춘 오른쪽 끝으로 접힌다 */
.pt.is-out .pt-head{animation:fade-out .2s .4s forwards}
.pt.is-out .pt-bar:nth-child(1){animation:pt-to-top .85s var(--ease-in-out) .48s forwards}
.pt.is-out .pt-bar:nth-child(2){animation:pt-to-bottom .85s var(--ease-in-out) .48s forwards}

/* 페이지 전환·메인 인트로 중에는 사이트 뷰파인더 커서(.cursor-dot·.cursor-box, 최상위 층)도 숨긴다.
   기본 포인터 숨김은 CSS 파일보다 먼저 적용되도록 inc/head.php의 인라인 스타일에 있고, 클릭은 transition.js가 막는다. */
html:is(.pt-lock,.intro-pending) :is(.cursor-dot,.cursor-box){opacity:0!important;transition:none!important}

/* 새 페이지가 열리는 동안 본문은 살짝 크고 어두운 상태에서 제자리로 돌아온다. 덮여 있는 동안 페이지 등장 효과는 멈춰 둔다. */
html.pt-hold :not(.pt,.pt *){animation-play-state:paused!important}
html.pt-revealing #main{animation:pt-page-in 1.4s var(--ease-out) .1s both;transform-origin:50% 40vh}
/* 확대된 본문이 화면 폭을 넘쳐 가로 스크롤바가 생기지 않게 잘라 둔다(clip은 스크롤 영역을 만들지 않아 sticky에 영향이 없다). */
html.pt-revealing,html.pt-revealing body{overflow-x:clip}

@keyframes pt-from-top{from{translate:0 -100%}}
@keyframes pt-from-bottom{from{translate:0 100%}}
@keyframes pt-to-top{to{translate:0 -100%}}
@keyframes pt-to-bottom{to{translate:0 100%}}
@keyframes pt-scale-x{from{scale:0 1}}
@keyframes pt-scale-x-out{to{scale:0 1}}
@keyframes pt-play-in{from{--pt-p:0}}
@keyframes pt-play-out{to{--pt-p:1}}
@keyframes pt-char-in{from{translate:0 110%;rotate:8deg}}
@keyframes pt-char-out{to{translate:0 -110%;rotate:-6deg}}
@keyframes pt-rec{50%{opacity:.25}}
@keyframes pt-page-in{from{scale:1.07;filter:brightness(.35)}}

@media(max-width:599px){
  .pt-hud{top:22px;font-size:9px;letter-spacing:.16em}
  .pt-meta{bottom:22px}
  .pt-meta>:nth-child(2),.pt-scene em{display:none}
  .pt-rec{height:22px;padding:0 8px 0 7px}
  .pt-corner{width:18px;height:18px}
  .pt-corner:nth-child(3){top:12px;left:12px}
  .pt-corner:nth-child(4){top:12px;right:12px}
  .pt-corner:nth-child(5){bottom:12px;left:12px}
  .pt-corner:nth-child(6){bottom:12px;right:12px}
  .pt-ticks{background-size:100% 7px,100% 3px}
  .pt-label{gap:10px}
  .pt-label span{font-size:10px;letter-spacing:.24em}
  .pt-label em{gap:10px;font-size:12px}
}