/* 돋보기 · 누르고 있으면 뜨는 설계도 원 · X-ray 판 · 첫 로딩 · 안내 알약 */
:root{--lp-cx:37.5%;--lp-cy:33.45%;--lp-shadow:rgb(18 18 20 / .22)}

/* 돋보기 — 위치·크기(--x --y --lw)·들림(--lift)은 v2-loupe.js 가 매 프레임 넣는다 */
.lp{position:fixed;left:0;top:0;z-index:30;width:calc(var(--lw,420) * 1px);aspect-ratio:1006/1100;pointer-events:none;
  transform:translate3d(calc(var(--x,0) * 1px - var(--lp-cx)),calc(var(--y,0) * 1px - var(--lp-cy)),0) scale(calc(1 + .04 * var(--lift,0)));transform-origin:var(--lp-cx) var(--lp-cy);
  filter:drop-shadow(calc(12px + 22px * var(--lift,0)) calc(22px + 34px * var(--lift,0)) calc(22px + 22px * var(--lift,0)) var(--lp-shadow));
  opacity:0;transition:opacity .6s var(--ease)}
.lp.is-ready{opacity:1}
.lp__img,.lp__3d{position:absolute;inset:0;width:100%;height:100%;user-select:none}
.lp.is-3d .lp__img{visibility:hidden}
.lp__glass{position:absolute;left:9.8%;top:8.1%;width:55.4%;aspect-ratio:1;border-radius:50%;overflow:hidden}
.lp__view{position:absolute;inset:0;opacity:var(--held,0);background:var(--paper)}
.lp__pg{position:absolute;left:0;top:0;overflow:hidden;transform-origin:0 0;pointer-events:none}
.lp__scr{position:absolute;inset:0;overflow:hidden}
.lp__gloss{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 26%,#ffffff40 0,#fff0 30%),radial-gradient(circle at 70% 78%,#ffffff1a 0,#fff0 26%);box-shadow:inset 0 0 calc(var(--lw,420) * .04px) #12121426}
.lp__note{position:absolute;left:var(--lp-cx);top:var(--lp-cy);translate:-50% -62%;font:400 calc(var(--lw,420) * .07px)/.9 var(--hand);letter-spacing:0;rotate:-4deg;color:var(--pt);text-align:center;opacity:var(--rest,1);transition:opacity .3s}
.lp__note i{display:block;font-style:normal;font-weight:400;font-size:.8em;margin:1.25em 0 0 1.6em}
.lp__hit{position:absolute;pointer-events:auto;cursor:grab;touch-action:none}
.lp__hit--ring{left:var(--lp-cx);top:var(--lp-cy);width:68%;aspect-ratio:1;border-radius:50%;translate:-50% -50%}
.lp__hit--handle{left:var(--lp-cx);top:var(--lp-cy);width:56%;height:10%;transform-origin:0 50%;transform:rotate(51deg) translate(58%,-50%)}
html.is-holding,html.is-holding *{cursor:grabbing!important;user-select:none!important}
html.is-holding .lp{z-index:41}   /* 들고 있을 땐 위 메뉴(40)보다 위 — 로고에 대면 진짜 로고가 유리를 덮지 않게 */

/* 빈 곳을 누르고 있는 동안 — 어두운 설계도 원 */
.hl{position:fixed;left:0;top:0;z-index:29;width:300px;height:300px;border-radius:50%;overflow:hidden;pointer-events:none;
  transform:translate3d(calc(var(--hx,0) * 1px - 50%),calc(var(--hy,0) * 1px - 50%),0) scale(var(--hs,0));transition:transform .45s var(--ease);box-shadow:0 0 0 1.5px var(--pt)}
.hl.is-on{--hs:1}
.hl__view{position:absolute;inset:0}
.hl::before{content:"";position:absolute;inset:0;z-index:2;border-radius:50%;background:repeating-conic-gradient(var(--pt) 0 .5deg,transparent .5deg 6deg);
  -webkit-mask:radial-gradient(circle,transparent 141px,#000 142px);mask:radial-gradient(circle,transparent 141px,#000 142px)}
.hl__x{position:absolute;inset:0;z-index:2;background:linear-gradient(#ff3e3e99,#ff3e3e99) 50% 0/1px 100% no-repeat,linear-gradient(#ff3e3e99,#ff3e3e99) 0 50%/100% 1px no-repeat}
.hl__x::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--pt)}
.hl__xy{position:absolute;z-index:2;left:50%;bottom:44px;translate:-50% 0;padding:2px 8px;border:1px solid #f4f4f240;border-radius:3px;font-size:10px;color:#f4f4f2;background:#121214}

/* X-ray 판 — 색 토큰을 뒤집고, 이름표 붙은 칸마다 크기를 단다 */
.xr-skin{--paper:#121214;--paper2:#1b1b1e;--ink:#ecece8;--ink2:#a3a3a8;--steel:#85858c;--line:#f4f4f21f;--line2:#f4f4f22e}
html.xr-skin,.xr-skin.lp__pg{background:var(--paper)}
html.xr-skin body,.xr-skin.lp__pg{background-image:linear-gradient(#f4f4f20a 1px,transparent 1px),linear-gradient(90deg,#f4f4f20a 1px,transparent 1px);background-size:16px 16px}
.xr-skin .hero__h,.xr-skin .d2{color:var(--ink)}
.xr-skin main img,.xr-skin .wc__shot,.xr-skin .fan li::before{filter:grayscale(1) brightness(.6)}
.xr-skin [data-x]{position:relative;outline:1px solid #ff3e3e8c;outline-offset:3px}
.xr-skin [data-x]::after{content:attr(data-x) "  " attr(data-xs);position:absolute;z-index:3;left:-4px;top:-22px;padding:2px 6px;font:500 10px/1.2 var(--mono);letter-spacing:.02em;color:#fff;background:var(--pt);border-radius:2px;white-space:nowrap;pointer-events:none}
.xr-skin [data-xn]::before{content:attr(data-xn);position:absolute;z-index:3;left:-4px;top:calc(100% + 8px);font:400 10px/1.3 var(--mono);color:var(--ink2);white-space:nowrap;pointer-events:none}
.xr-skin .fan li::after,.xr-skin .wc__info::after{top:8px;left:8px}
.xr-skin .ct__card{outline-offset:-1px}

/* 안내 알약 — 왼쪽 아래 */
.hint{position:fixed;left:64px;bottom:22px;z-index:25;display:flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border:1px solid var(--line);border-radius:var(--pill);background:#f4f4f2eb;box-shadow:0 8px 24px #1212140f;font-size:12px;color:var(--steel);transition:opacity .5s var(--ease),translate .5s var(--ease)}
.hint b{font-weight:600;color:var(--ink)}
.hint i{width:7px;height:7px;border-radius:50%;background:var(--pt)}
.hint.is-off{opacity:0;translate:0 12px;pointer-events:none}

@media (max-width:900px){
  .hint{display:none}   /* 폰은 메틱처럼 안내 알약 없음 — 버튼과 겹친다 */
  .hl{display:none}
}