/* ─────────────────────────────────────────────
   premium.js 짝 스타일 (참고용 원본) — 색은 각 사이트 변수로 바꿔 쓴다
   --cur: 커서 색 · --cur-ink: 커서 글자색 · --pt-bg: 페이지 전환 막 색 · --pt-ink: 막 위 글자색
   ───────────────────────────────────────────── */

/* 맞춤 커서 (데스크톱만) */
.has-cur, .has-cur a, .has-cur button, .has-cur label, .has-cur [data-cursor] { cursor: none; }
.has-cur input, .has-cur textarea, .has-cur select { cursor: auto; }
.cur-dot, .cur-ring { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cur-on .cur-dot, .cur-on .cur-ring { opacity: 1; }
.cur-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--cur, #111); }
.cur-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
.cur-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--cur, #111); opacity: .45; transition: transform .45s cubic-bezier(.16,1,.3,1), background .3s, opacity .3s, border-color .3s; }
.cur-ring span { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.6); opacity: 0; font: 600 12px/1 var(--kr, sans-serif); letter-spacing: -.01em; color: var(--cur-ink, #fff); white-space: nowrap; transition: opacity .3s, transform .45s cubic-bezier(.16,1,.3,1); }
.cur-ring.hover::before { transform: scale(1.6); opacity: .25; background: var(--cur, #111); }
.cur-ring.label::before { transform: scale(2.5); opacity: 1; background: var(--cur, #111); border-color: transparent; }
.cur-ring.label span { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.cur-ring.down::before { transform: scale(.8); }
.cur-ring.dark { --cur: #fff; --cur-ink: #111; }
.has-cur .cur-ring.hover ~ .cur-dot, .has-cur .cur-ring.label ~ .cur-dot { opacity: 0; }

/* 자석 버튼 — 되돌아올 때 부드럽게 */
[data-magnetic] { transition: transform .6s cubic-bezier(.16,1,.3,1); will-change: transform; }
[data-magnetic-inner] { display: inline-flex; transition: transform .6s cubic-bezier(.16,1,.3,1); }

/* 글자 나누기 — 보이면(.in) 아래에서 올라온다 */
.sp { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.sp-i { display: inline-block; }
html.js [data-split] .sp-i { transform: translateY(105%); transition: transform 1.1s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i) * 45ms + var(--d, 0ms)); }
html.js [data-split].in .sp-i { transform: none; }

/* 영상 — 포스터에서 영상으로 부드럽게 */
video[data-src] { opacity: 1; }
.vwrap { position: relative; overflow: hidden; }
.vwrap > img, .vwrap > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vwrap > video { opacity: 0; transition: opacity 1.2s; }
.vwrap > video.ready { opacity: 1; }

/* 필름 그레인 — 아주 옅게 */
.grain { position: fixed; inset: -50%; z-index: 9000; pointer-events: none; opacity: var(--grain, .06); background-image: 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%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(6) infinite; mix-blend-mode: multiply; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-4%)} 60%{transform:translate(-4%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* 페이지 전환 막 — 아래에서 올라와 덮고, 다음 페이지에서 위로 걷힌다 */
.pt { position: fixed; inset: 0; z-index: 9500; pointer-events: none; visibility: hidden; }
.pt-in { position: absolute; inset: 0; background: var(--pt-bg, #111); color: var(--pt-ink, #fff); display: grid; place-items: center; transform: translateY(100%); }
.pt-in span { font: 600 15px/1 var(--kr, sans-serif); letter-spacing: .08em; opacity: 0; transition: opacity .3s .25s; }
.pt.enter, .pt.cover { visibility: visible; pointer-events: auto; }
.pt.enter .pt-in { transform: none; transition: transform .7s cubic-bezier(.76,0,.24,1); }
.pt.enter .pt-in span, .pt.cover .pt-in span { opacity: 1; }
.pt.cover .pt-in { transform: none; transition: none; }
.pt.cover.leave .pt-in { transform: translateY(-100%); transition: transform .8s cubic-bezier(.76,0,.24,1) .1s; }
.pt.cover.leave .pt-in span { opacity: 0; transition: opacity .2s; }

@media (prefers-reduced-motion: reduce) {html:not(.motion-on) .grain{ animation: none; }html:not(.motion-on).js [data-split] .sp-i{ transform: none; transition: none; }
}