/* 3·4번 화면: Xlence 준비 · 연결. 왼쪽 단계 목록 / 가운데 할 일 하나 / 오른쪽 실제 화면(종이) + 누를 곳.
   시안 C(그래파이트 안개 유리) 위의 종이. 움직임은 transform·opacity만. */

html[data-page="3"] #px, html[data-page="4"] #px { visibility: visible; opacity: 1; }
html[data-page="3"] .stepper, html[data-page="3"] .top-r, html[data-page="4"] .stepper, html[data-page="4"] .top-r { visibility: visible; opacity: 1; }
html[data-v="C"][data-page="3"] .bg-glow, html[data-v="C"][data-page="4"] .bg-glow { transform: translate3d(8%, 18%, 0) scale(1.2); }

#px { display: grid; grid-template-columns: 12rem 29rem minmax(0, 1fr); column-gap: 2.6rem; padding: 5.5rem 3rem 2.4rem 3.5rem; }

/* ── 왼쪽: 출입증 + 단계 목록 ─────────────────────── */
.x-rail { min-height: 0; display: flex; flex-direction: column; align-items: center; padding-top: 3.4rem; }
.x-rail .slot { width: 7.8rem; height: 12.15rem; flex: none; }
.x-groups { list-style: none; margin: 2.6rem 0 0; padding: 0; width: 100%; position: relative; }
.x-groups::before { content: ""; position: absolute; left: .69rem; top: 1rem; bottom: 1rem; width: 1px; background: linear-gradient(180deg, var(--faint), rgba(243, 239, 228, .06)); }
.x-groups > li { position: relative; padding: .55rem 0 .55rem 2.1rem; color: var(--dim); font-size: .86rem; line-height: 1.3; transition: color .4s var(--ease); }
.xg-l { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xg-dot { position: absolute; left: .2rem; top: .7rem; width: 1rem; height: 1rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--faint); background: #0e0f11; color: transparent; font-size: .58rem; transition: background .4s, border-color .4s, color .4s, box-shadow .4s; }
.x-groups > li.done { color: var(--mute); }
.x-groups > li.done .xg-dot { border-color: var(--acc-line); color: var(--acc); }
.x-groups > li.on { color: var(--fg); font-weight: 600; }
.x-groups > li.on .xg-dot { background: var(--acc); border-color: var(--acc); color: transparent; box-shadow: 0 0 0 .26rem var(--acc-dim), 0 0 1rem var(--acc-glow); }
.xg-sub { list-style: none; margin: .4rem 0 0; padding: 0; }
.xg-sub:empty { display: none; }
.xg-sub button { width: 100%; display: flex; align-items: center; gap: .5rem; padding: .24rem 0; font-size: .76rem; font-weight: 400; color: var(--dim); text-align: left; white-space: nowrap; transition: color .3s; }
.xg-sub button span, .xg-sub button { overflow: hidden; text-overflow: ellipsis; }
.xg-sub button::before { content: ""; flex: none; width: .32rem; height: .32rem; border-radius: 50%; background: currentColor; opacity: .55; transition: transform .35s var(--spring), opacity .3s; }
.xg-sub button:hover { color: var(--fg); }
.xg-sub button.done { color: var(--mute); }
.xg-sub button.on { color: var(--acc); font-weight: 600; }
.xg-sub button.on::before { opacity: 1; transform: scale(1.5); box-shadow: 0 0 .5rem var(--acc); }

/* ── 가운데: 할 일 카드 ─────────────────────────── */
.x-card { align-self: start; margin-top: 3.4rem; max-height: calc(100% - 3.4rem); min-height: 0; display: flex; flex-direction: column; padding: 2rem 2.2rem 2.1rem; }
.x-card > * { position: relative; }
.x-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.x-top .eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 600 .8rem/1.3 var(--body); letter-spacing: 0; text-transform: none; }
.x-count { flex: none; font: 500 .76rem/1 var(--disp); letter-spacing: .06em; color: var(--dim); }
.x-prog { display: flex; gap: .22rem; height: .22rem; margin-top: 1rem; }
.x-prog i { flex: 1; position: relative; overflow: hidden; border-radius: 99rem; background: rgba(243, 239, 228, .1); }
.x-prog i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--acc), var(--acc2)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--ease), opacity .4s; }
.x-prog i.done::after { transform: none; opacity: .55; }
.x-prog i.on::after { transform: none; }
.x-body { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 1.6rem; }
.x-in { display: flex; flex-direction: column; }
.x-in.leaving { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.x-h { margin: 0; font: 700 1.7rem/1.28 var(--body); letter-spacing: -.012em; text-wrap: balance; }
.x-lead { margin: .8rem 0 0; color: var(--mute); font-size: .92rem; line-height: 1.62; text-wrap: pretty; }

.x-acts { list-style: none; margin: 1.45rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .28rem; }
.x-act { width: 100%; min-height: 2.55rem; display: flex; align-items: center; gap: .75rem; padding: .42rem .75rem .42rem .5rem; border-radius: .85rem; border: 1px solid transparent; color: var(--mute); font-size: .88rem; line-height: 1.4; text-align: left;
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s; }
.x-act b { flex: none; width: 1.55rem; height: 1.55rem; border-radius: 50%; display: grid; place-items: center; font: 700 .74rem/1 var(--disp); border: 1px solid var(--faint); color: var(--mute);
  transition: background .35s, border-color .35s, color .35s, box-shadow .35s, transform .4s var(--spring); }
.x-act small { display: block; margin-top: .12rem; font-size: .74rem; line-height: 1.4; color: var(--mute); opacity: .85; }
.x-act:hover { background: rgba(255, 255, 255, .035); }
.x-act.past b { border-color: var(--acc-line); color: var(--acc); }
.x-act.on { color: var(--fg); background: linear-gradient(90deg, rgba(201, 247, 61, .085), rgba(201, 247, 61, .02)); border-color: rgba(201, 247, 61, .24); }
.x-act.on b { background: var(--acc); border-color: var(--acc); color: var(--on-acc); box-shadow: 0 0 0 .22rem var(--acc-dim), 0 0 .9rem var(--acc-glow); transform: scale(1.06); }

.x-tip, .x-calm { margin: 1.15rem 0 0; display: flex; align-items: flex-start; gap: .62rem; padding: .8rem .95rem; border-radius: .9rem; font-size: .82rem; line-height: 1.58; color: rgba(243, 239, 228, .8); }
.x-tip svg, .x-calm svg { flex: none; font-size: 1.05rem; margin-top: .1rem; }
.x-tip { background: rgba(240, 185, 11, .065); border: 1px solid rgba(240, 185, 11, .2); }
.x-tip svg { color: #f0b90b; }
.x-calm { background: rgba(47, 210, 122, .06); border: 1px solid rgba(47, 210, 122, .2); }
.x-calm svg { color: var(--ok); }
.x-calm.big { margin-top: 1.5rem; padding: 1rem 1.1rem; font-size: .9rem; }
.x-todo { margin-top: 1.4rem; }
.x-todo p { margin: 0 0 .6rem; font-size: .78rem; font-weight: 600; color: var(--dim); }
.x-todo ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.x-todo li { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem .55rem .5rem; border-radius: .85rem; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .05); font-size: .88rem; color: var(--mute); }
.x-todo li:first-child { color: var(--fg); border-color: rgba(201, 247, 61, .22); background: linear-gradient(90deg, rgba(201, 247, 61, .07), rgba(201, 247, 61, .015)); }
.x-todo i { flex: none; width: 1.55rem; height: 1.55rem; border-radius: 50%; display: grid; place-items: center; font: 700 .74rem/1 var(--disp); font-style: normal; border: 1px solid var(--faint); color: var(--mute); }
.x-todo li:first-child i { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.x-in > .x-tip + .x-calm { margin-top: .55rem; }

.x-file { margin-top: 1.15rem; display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border-radius: .95rem; border: 1px dashed var(--acc-line); background: var(--acc-dim); text-align: left; transition: transform .3s var(--ease), background .3s; }
.x-file > svg { flex: none; width: 2.4rem; height: 2.4rem; padding: .55rem; border-radius: .7rem; background: var(--acc); color: var(--on-acc); }
.x-file b { display: block; font-size: .92rem; color: var(--fg); }
.x-file small { display: block; margin-top: .2rem; font-size: .74rem; color: var(--dim); }
.x-file:hover { transform: translateY(-1px); background: rgba(201, 247, 61, .16); }

.x-nav { margin-top: auto; padding-top: 1.8rem; display: flex; flex-direction: column; gap: .55rem; }
.x-web { flex: none; width: 100%; height: 2.7rem; border-color: var(--faint); color: var(--mute); transition: border-color .25s, color .25s, background .25s; }
.x-web:hover { border-color: rgba(243, 239, 228, .3); color: var(--fg); background: rgba(255, 255, 255, .03); }
.x-web.off { visibility: hidden; }
.x-nav-row { display: flex; gap: .6rem; }
.x-nav-row .go { flex: 1; }
.x-back { flex: none; width: 3.5rem; height: 3.5rem; margin-top: .55rem; border-radius: .95rem; display: grid; place-items: center; border: 1px solid var(--faint); color: var(--mute); font-size: 1.15rem; transition: border-color .25s, color .25s, transform .2s var(--ease); }
.x-back:hover { border-color: rgba(243, 239, 228, .3); color: var(--fg); }
.x-back:active { transform: scale(.96); }

/* ── 오른쪽: 실제 화면(종이) ─────────────────────── */
.x-stage { position: relative; min-width: 0; min-height: 0; container-type: size; }
.x-scene { position: absolute; inset: 0; }
.x-scene.leaving { pointer-events: none; }
html #px .x-paper { position: absolute; margin: 0; transform: none; transform-origin: 50% 50%; transition: opacity .55s var(--ease), transform .55s var(--ease); }
html #px .x-paper.dim { opacity: .5; transform: scale(.97); }
.x-paper .shot-url { flex: none; max-width: 75%; }
.x-img { position: relative; overflow: hidden; border-radius: 0 0 .8rem .8rem; background: #fff; isolation: isolate; }
.x-img::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.x-cam { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; transition: transform .9s var(--ease-io); will-change: transform; }
.x-cam.now, .x-mark.now { transition: none !important; }
.x-pic { position: absolute; isolation: isolate; }
.x-pic img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.x-img .shot-gloss { z-index: 1; }
/* 스포트라이트: 누를 곳 둘레만 밝게, 나머지는 살짝 어둡게. 지점이 바뀌면 서로 겹쳐 사라지고 나타난다 */
.x-spot { position: absolute; z-index: 1; border-radius: calc(.5rem * var(--iz, 1)); opacity: 0; pointer-events: none; transition: opacity .45s var(--ease);
  box-shadow: 0 0 0 calc(1.5px * var(--iz, 1)) rgba(18, 24, 6, .9), 0 0 0 calc(4.5px * var(--iz, 1)) var(--acc), 0 0 calc(22px * var(--iz, 1)) calc(5px * var(--iz, 1)) rgba(201, 247, 61, .5), 0 0 0 200vmax rgba(22, 24, 28, .055); }
.x-spot:not(.box) { width: calc(2.8rem * var(--iz, 1)); height: calc(2.8rem * var(--iz, 1)); margin: calc(-1.4rem * var(--iz, 1)) 0 0 calc(-1.4rem * var(--iz, 1)); border-radius: 50%; }
.x-spot.on { opacity: 1; }
/* 여러 칸을 채우는 묶음: 은은한 테두리만, 화면은 거의 어둡게 하지 않는다 */
.x-spot.wide { border-radius: calc(.7rem * var(--iz, 1)); box-shadow: 0 0 0 calc(1.5px * var(--iz, 1)) rgba(150, 190, 30, .95), 0 0 calc(26px * var(--iz, 1)) calc(2px * var(--iz, 1)) rgba(201, 247, 61, .28), inset 0 0 0 200vmax rgba(201, 247, 61, .035), 0 0 0 200vmax rgba(22, 24, 28, .025); }
.x-spot.wide.on::after { animation: none; }
/* 그림 위 짧은 풀이: 가리킨 칸 오른쪽에 붙는 작은 표(카메라 확대와 무관하게 같은 크기) */
.x-ann { position: absolute; z-index: 2; transform: translate(0, -50%); white-space: nowrap; pointer-events: none;
  padding: calc(.28rem * var(--iz, 1)) calc(.6rem * var(--iz, 1)); border-radius: calc(.45rem * var(--iz, 1));
  border-left: calc(3px * var(--iz, 1)) solid var(--acc); background: rgba(22, 24, 28, .86); color: #f3f5ef;
  font-weight: 600; font-size: calc(.74rem * var(--iz, 1)); line-height: 1.3; box-shadow: 0 calc(.2rem * var(--iz, 1)) calc(.8rem * var(--iz, 1)) rgba(0, 0, 0, .18); }
.x-ann.below { transform: translate(-50%, 0); border-left: 0; border-top: calc(3px * var(--iz, 1)) solid var(--acc); }
.x-spot::after { content: ""; position: absolute; inset: calc(-7px * var(--iz, 1)); border-radius: inherit; border: calc(2px * var(--iz, 1)) solid var(--acc); opacity: 0; }
.x-spot.on::after { animation: xPulseBox 1.7s var(--ease) infinite; }
.x-spot.on:not(.box)::after { animation-name: xPulse; }
/* 번호 배지: 카메라 바깥(크기 그대로)에서 지점 왼쪽 위 모서리를 따라간다 */
.x-marks { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; z-index: 3; pointer-events: none; }  /* 종이 밖(테두리)까지 걸칠 수 있게 x-img 바깥 */
.x-mark { left: 0; top: 0; padding: 0; pointer-events: auto; cursor: pointer; transition: transform .9s var(--ease-io), opacity .35s; }
.x-mark b { background: #1b1c20; color: #f3efe4; box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 .3rem .7rem rgba(0, 0, 0, .35); transform: scale(.8); transition: transform .45s var(--spring), background .3s, color .3s, box-shadow .3s; }
.x-mark::before { opacity: 0; inset: -.45rem; }
.x-mark.past b { color: var(--acc); transform: scale(.72); }
.x-mark.on { z-index: 2; }
.x-mark.on b { background: var(--acc); color: var(--on-acc); transform: scale(1.12); box-shadow: 0 0 0 2px rgba(18, 24, 6, .9), 0 0 0 .3rem rgba(201, 247, 61, .35), 0 .35rem .9rem rgba(0, 0, 0, .4); }
.x-mark.on::before { animation: xPulse 1.7s var(--ease) infinite; }
.x-mark.away { opacity: 0; pointer-events: none; }
.x-note { position: absolute; margin: 0; display: flex; align-items: center; gap: .45rem; font-size: .72rem; color: var(--dim); white-space: nowrap; }
.x-note::before { content: ""; width: .38rem; height: .38rem; border-radius: 50%; background: var(--ok); opacity: .8; }

/* ── 검수 대기 ──────────────────────────────────── */
.x-review { display: grid; place-items: center; }
.xr-wrap { display: flex; align-items: center; gap: 4rem; }
.xr-dial { position: relative; flex: none; width: 19rem; height: 19rem; }
.xr-glow { position: absolute; inset: -4rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(201, 247, 61, .12), rgba(201, 247, 61, .03) 60%, transparent); }
.xr-track { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--faint); box-shadow: inset 0 0 0 1.1rem rgba(255, 255, 255, .02), inset 0 0 0 calc(1.1rem + 1px) rgba(243, 239, 228, .06); }
.xr-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(201, 247, 61, 0) 0 55%, rgba(201, 247, 61, .9) 100%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - .5rem), #000 calc(100% - .45rem)); mask: radial-gradient(closest-side, transparent calc(100% - .5rem), #000 calc(100% - .45rem)); animation: spin 7s linear infinite; will-change: transform; }
.xr-dot { position: absolute; inset: 0; animation: spin 7s linear infinite; will-change: transform; }
.xr-dot::after { content: ""; position: absolute; left: 50%; top: -.1rem; width: .7rem; height: .7rem; margin-left: -.35rem; border-radius: 50%; background: var(--acc2); box-shadow: 0 0 0 .25rem rgba(201, 247, 61, .18), 0 0 1.2rem var(--acc); }
.xr-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; }
.xr-c small { font: 600 .78rem/1 var(--disp); letter-spacing: .3em; color: var(--dim); padding-left: .3em; }
.xr-c b { font: 700 4.6rem/1 var(--disp); letter-spacing: -.02em; color: var(--fg); }
.xr-c span { font-size: 1rem; color: var(--mute); }
.xr-side { width: 24rem; display: flex; flex-direction: column; gap: 2.2rem; }
.xr-line { list-style: none; margin: 0; padding: 0; }
.xr-line li { position: relative; display: flex; align-items: center; gap: .95rem; padding: .7rem 0; font-size: 1rem; color: var(--dim); }
.xr-line li:not(:last-child)::after { content: ""; position: absolute; left: 1.05rem; top: 2.8rem; height: 1.4rem; width: 1px; background: var(--faint); }
.xr-line li.done:not(:last-child)::after { background: var(--acc-line); }
.xr-line i { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--faint); background: #0e0f11; font-size: .95rem; }
.xr-line li.done { color: var(--mute); }
.xr-line li.done i { border-color: var(--acc-line); color: var(--acc); }
.xr-line li.on { color: var(--fg); font-weight: 600; }
.xr-line li.on i { border-color: var(--acc); box-shadow: 0 0 0 .25rem var(--acc-dim); }
.xr-line li.on em { width: .62rem; height: .62rem; border-radius: 50%; background: var(--acc); box-shadow: 0 0 .8rem var(--acc); animation: xBreath 1.8s ease-in-out infinite; }
.xr-line small { margin-left: auto; padding: .24rem .6rem; border-radius: 99rem; border: 1px solid var(--acc-line); background: var(--acc-dim); color: var(--acc); font-size: .72rem; font-weight: 600; }
.xr-nudge { display: flex; align-items: center; gap: 1rem; padding: .85rem 1.1rem .85rem .85rem; border-radius: 1.1rem; text-align: left; background: linear-gradient(180deg, #202126, #17181c); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 1.6rem 3rem -1.6rem rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .07); transition: transform .3s var(--ease), border-color .3s; }
.xr-nudge:hover { transform: translateY(-2px); border-color: var(--acc-line); }
.xr-thumb { flex: none; width: 6.6rem; height: 4.5rem; border-radius: .55rem; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); position: relative; }
.xr-thumb::after { content: ""; position: absolute; inset: 0; background: #ece3d3; mix-blend-mode: multiply; }
.xr-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.xr-nt b { display: block; font-size: .95rem; color: var(--fg); }
.xr-nt small { display: block; margin-top: .3rem; font-size: .78rem; color: var(--dim); }
.xr-go { margin-left: auto; flex: none; font-size: 1.2rem; color: var(--acc); transition: transform .3s var(--ease); }
.xr-nudge:hover .xr-go { transform: translateX(.2rem); }

/* ── 연결 완료 ──────────────────────────────────── */
.x-done { display: grid; place-items: center; }
.xd-frame { position: relative; width: min(100cqw, 64rem, calc((100cqh - 1rem) * 1.6)); aspect-ratio: 16 / 10; border-radius: .9rem; overflow: hidden; background: #0c0d0f; border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 2rem 4rem -1.6rem rgba(0, 0, 0, .9), 0 0 5rem -1rem rgba(201, 247, 61, .12); }
.xd-bar { position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 2.3rem; display: flex; align-items: center; justify-content: space-between; padding: 0 .9rem; background: #16171a; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.xd-pair { font: 600 .8rem/1 var(--disp); letter-spacing: .06em; color: var(--mute); }
.xd-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .6rem; border-radius: .4rem; border: 1px solid var(--acc-line); background: rgba(201, 247, 61, .1); color: var(--acc); font: 600 .78rem/1 var(--disp); letter-spacing: .06em; }
.xd-chip svg { font-size: 1.05rem; }
.xd-chart { position: absolute; inset: 2.3rem 0 0; opacity: .5; }
.xd-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 100% 20%, 12.5% 100%; }
.xd-candles { position: absolute; inset: 6% 3% 6% 2%; width: 95%; height: 88%; }
.xd-candles line { stroke-width: 1; vector-effect: non-scaling-stroke; }
.xd-candles .u { stroke: #6fd7a2; fill: #6fd7a2; }
.xd-candles .d { stroke: #e57b7b; fill: #e57b7b; }
.xd-candles .px { stroke: var(--acc); stroke-dasharray: 4 4; }
.xd-cele { position: absolute; left: 50%; top: 52%; width: 0; height: 0; }
.xd-ok { position: absolute; left: -3.6rem; top: -3.6rem; width: 7.2rem; height: 7.2rem; border-radius: 50%; display: grid; place-items: center; font-size: 3.3rem; color: var(--on-acc);
  background: radial-gradient(circle at 35% 30%, var(--acc2), var(--acc) 70%); box-shadow: 0 0 0 .7rem rgba(201, 247, 61, .14), 0 0 4.5rem rgba(201, 247, 61, .55), inset 0 1px 0 rgba(255, 255, 255, .6); }
.xd-ring { position: absolute; left: -3.6rem; top: -3.6rem; width: 7.2rem; height: 7.2rem; border-radius: 50%; border: 2px solid var(--acc); opacity: 0; }
.xd-p { position: absolute; left: calc(var(--s) / -2); top: calc(var(--s) / -2); width: var(--s); height: var(--s); border-radius: 50%; background: var(--acc2); box-shadow: 0 0 .6rem var(--acc); opacity: 0; }
.xd-t { position: absolute; left: 0; top: 7.4rem; transform: translateX(-50%); white-space: nowrap; padding: .6rem 1.2rem; border-radius: 99rem; background: linear-gradient(180deg, rgba(40, 44, 34, .92), rgba(20, 22, 18, .92)); border: 1px solid var(--acc-line); box-shadow: 0 .5rem 1.6rem rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08); font: 700 1.2rem/1 var(--body); color: var(--fg); }
.x-done.still .xd-p { opacity: .85; transform: rotate(var(--a)) translate3d(calc(var(--d) * .62), 0, 0); }
.x-done.still .xd-ring { opacity: .35; transform: scale(1.45); }
.x-done.still .xd-ring.r2 { opacity: .16; transform: scale(1.95); }

@keyframes xPulse { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes xPulseBox { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.035); } }
@keyframes xBreath { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }

/* 캡처: 움직임을 멈춰 강조가 보이는 순간을 고정 */
html.shot #px *, html.shot #px *::before, html.shot #px *::after { transition: none !important; }
html.shot .x-spot.on::after { animation: none; opacity: .55; transform: scale(1.012); }
html.shot .x-spot.on:not(.box)::after { transform: scale(1.25); }
html.shot .x-mark.on::before { animation: none; opacity: .45; transform: scale(1.15); }
html.shot .xr-ring, html.shot .xr-dot { animation: none; transform: rotate(-40deg); }
html.shot .xr-line li.on em { animation: none; }
html[data-motion="reduce"] .xr-ring, html[data-motion="reduce"] .xr-dot { animation: none !important; transform: rotate(-40deg); }
html[data-motion="reduce"] .x-spot.on::after, html[data-motion="reduce"] .x-mark.on::before { animation: none !important; opacity: .5; }