/* ============================================================
   ARIFE — 마우스 포인터 (모든 쪽 공통)
     · 동그란 테 포인터 + 가운데 점
     · 그 뒤를 조금 늦게 따라오는 은은한 빛
   ------------------------------------------------------------
   v900 (2026-08-31) — 정리.
     v800~v831 이 여섯 겹으로 쌓여 같은 값을 계속 덮어쓰고 있었다.
     색을 한 곳(변수)에서 정하고, 규칙은 한 벌만 남긴다.
     그리고 밝은 쪽과 어두운 쪽의 색을 처음으로 갈랐다 —
     그동안 두 쪽 다 남색 테였고, 어두운 화면에서는 테가 배경에
     묻혀 흰 테 한 겹만 보였다.
   ------------------------------------------------------------
   포인터를 둘러싸던 네모난 회색 자국에 대하여
     기존 `.motion-cursor` 에는 `contain:layout paint` 와
     `isolation:isolate` 가 걸려 있었다. 이 둘은 그 자리를 '따로
     그리는 층' 으로 떼어 놓는데, 이 사이트는 판마다 뒷배경을 흐리는
     유리(backdrop-filter)를 쓴다. 떼어 놓은 층 안쪽은 그 흐림을
     다시 계산하는 바람에 포인터 크기만 한 네모가 드러났다.
     떼어 놓지 않으면 네모도 사라진다.
   ============================================================ */

/* ── 색은 여기서만 정한다 ─────────────────────────────────
   밝은 쪽: 남색 테 + 흰 겉테  (밝은 바탕에서 또렷하다)
   어두운 쪽: 밝은 테 + 검은 겉테 (어두운 바탕에서 또렷하다)
   겉테는 늘 테와 반대색이라, 어떤 배경 위에서도 한쪽은 살아남는다. */
:root{
  --a-cur-ink:rgba(38,72,132,.95);
  --a-cur-ink-on:rgba(38,72,132,1);
  --a-cur-halo:rgba(255,255,255,.8);
  --a-cur-halo-on:rgba(255,255,255,.85);
  --a-cur-dot-halo:rgba(255,255,255,.7);
  --a-cur-fill:rgba(120,164,224,.4);
  --a-cur-glow:120,164,224;
}
html[data-theme="dark"]{
  --a-cur-ink:rgba(228,238,252,.95);
  --a-cur-ink-on:rgba(240,247,255,1);
  --a-cur-halo:rgba(8,14,28,.72);
  --a-cur-halo-on:rgba(8,14,28,.8);
  --a-cur-dot-halo:rgba(8,14,28,.66);
  --a-cur-fill:rgba(150,192,246,.3);
  --a-cur-glow:150,192,246;
}

/* ── 테 포인터 ────────────────────────────────────────────
   유리판 위에서 네모 자국이 생기지 않도록 층을 떼어 놓지 않는다. */
.motion-cursor:not(#_):not(#_){
  contain:none!important;
  isolation:auto!important;
  mix-blend-mode:normal!important;
  backface-visibility:visible!important;
  background:none!important;
  filter:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  width:30px!important;height:30px!important;
  margin:-15px 0 0 -15px!important;
}

/* 테 — 2px. 흐려서 안 보인다는 지적(2026-08-22 실측)으로 올린 값. */
.motion-cursor .motion-cursor__inner:not(#_):not(#_):not(#_):not(#_):not(#_){
  border:2px solid var(--a-cur-ink)!important;
  background:none!important;
  box-shadow:
    0 0 0 1.5px var(--a-cur-halo),
    0 0 10px rgba(var(--a-cur-glow),.55)!important;
}
/* 가운데 점 — 어디를 가리키는지 점이 말해 준다 */
.motion-cursor:not(#_):not(#_):not(#_):not(#_):not(#_)::after{
  content:'';
  position:absolute;left:50%;top:50%;
  width:4px;height:4px;margin:-2px 0 0 -2px;
  border-radius:50%;
  background:var(--a-cur-ink);
  box-shadow:0 0 0 1px var(--a-cur-dot-halo);
}
/* 누를 수 있는 것 위 — 조여들고 속이 찬다 */
.motion-cursor.is-hovering .motion-cursor__inner:not(#_):not(#_):not(#_):not(#_):not(#_){
  transform:scale(.56)!important;
  background:var(--a-cur-fill)!important;
  border-color:var(--a-cur-ink-on)!important;
  box-shadow:
    0 0 0 1.5px var(--a-cur-halo-on),
    0 0 10px rgba(var(--a-cur-glow),.7)!important;
}

/* ── 뒤따라오는 빛 ───────────────────────────────────────── */
.a-cursor-glow-v800{
  position:fixed;
  left:0;top:0;
  width:210px;height:210px;
  margin:-105px 0 0 -105px;
  border-radius:50%;
  z-index:2147483645;
  pointer-events:none;
  opacity:0;
  will-change:transform,opacity;
  transition:opacity .32s ease;
}
.a-cursor-glow-v800.is-visible{opacity:1}
.a-cursor-glow-v800:not(#_):not(#_):not(#_):not(#_):not(#_){
  background:radial-gradient(circle closest-side,
    rgba(var(--a-cur-glow),.26),
    rgba(var(--a-cur-glow),.12) 44%,
    rgba(var(--a-cur-glow),.04) 66%,
    transparent 78%);
}
.a-cursor-glow-v800.is-hot:not(#_):not(#_):not(#_):not(#_):not(#_){
  background:radial-gradient(circle closest-side,
    rgba(var(--a-cur-glow),.4),
    rgba(var(--a-cur-glow),.18) 44%,
    rgba(var(--a-cur-glow),.06) 66%,
    transparent 78%);
}

/* ── 손가락으로 쓰는 화면·움직임을 줄인 설정에서는 둘 다 감춘다 ── */
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
  .motion-cursor,.a-cursor-glow-v800{display:none!important}
  .custom-cursor-enabled,
  .custom-cursor-enabled a,
  .custom-cursor-enabled button,
  .custom-cursor-enabled input,
  .custom-cursor-enabled select,
  .custom-cursor-enabled textarea{cursor:auto!important}
}

/* arife-site.css 를 안 쓰는 쪽에서는 기본 화살표가 그대로 남는다 —
   여기서도 감춰 준다 */
html.custom-cursor-enabled,
html.custom-cursor-enabled body,
html.custom-cursor-enabled a,
html.custom-cursor-enabled button,
html.custom-cursor-enabled input,
html.custom-cursor-enabled select,
html.custom-cursor-enabled textarea,
html.custom-cursor-enabled summary,
html.custom-cursor-enabled [role="button"]{cursor:none!important}
/* 글을 쓰는 칸은 어디를 찍는지 보여야 한다 */
html.custom-cursor-enabled input[type="text"],
html.custom-cursor-enabled input[type="search"],
html.custom-cursor-enabled input[type="email"],
html.custom-cursor-enabled input[type="password"],
html.custom-cursor-enabled input[type="number"],
html.custom-cursor-enabled textarea{cursor:text!important}

/* ── 영상 편집기는 OS 기본 커서 (v810) ────────────────────
   따라오는 테·빛은 무거운 편집 화면에서 포인터 렉으로 느껴진다.
   스크립트도 film-page 에선 시작하지 않지만, 여기서 한 번 더 막는다. */
body.film-page .motion-cursor,
body.film-page .a-cursor-glow-v800{display:none!important}
html.custom-cursor-enabled body.film-page,
html.custom-cursor-enabled body.film-page :is(a,button,input,select,textarea,summary,[role="button"]){cursor:auto!important}