/* 커스텀 커서 — 평소엔 주황 십자, 누를 수 있는 곳에서는 상황별 아이콘(카톡 말풍선·
   전화 수화기·이동→·넘기기←)으로 바뀐다 (지시서 2026-11-08). 라벨 원·글자·색 톤 규칙은
   전부 없앴다 — 아이콘 자체가 흰 테두리를 둘러서 어떤 배경에서도 읽힌다.
   (hover:hover) and (pointer:fine) and >=1024px일 때만 cursor.js가 html에 has-cursor를
   붙인다. 그 전까지는 이 파일의 규칙이 아무 효과도 없다(기본 시스템 커서 그대로). */

html.has-cursor, html.has-cursor *{ cursor:none !important; }
/* 입력 요소 위에서는 기본 커서(I-beam 등)를 보여주고 커스텀 커서는 숨긴다. 체크박스·라디오는
   글자 입력칸이 아니라 누르는 토글이라 여기서 빼고 손가락 커서가 뜨게 둔다(지시서 2026-11-14). */
html.has-cursor input:not([type="checkbox"]):not([type="radio"]),
html.has-cursor textarea,
html.has-cursor select,
html.has-cursor [contenteditable],
html.has-cursor [contenteditable] *{ cursor:auto !important; }

.cursor-cross, .cursor-icon{
  position:fixed; top:0; left:0;
  pointer-events:none;
  z-index:9999; /* 헤더(40)·메가 패널(45)·페이지 와이프(200)보다 위 */
  opacity:0;
}
html.has-cursor .cursor-cross,
html.has-cursor .cursor-icon{ opacity:1; }

/* 창 밖으로 나가거나 입력 요소 위일 때 — 둘 다 숨김. */
html.cursor-outside .cursor-cross,
html.cursor-outside .cursor-icon,
html.cursor-on-field .cursor-cross,
html.cursor-on-field .cursor-icon{ opacity:0; }

/* ---------- 십자: 20x20, 두께 3px, 꽉 찬 모양, 주황 + 흰 테두리 1px ----------
   위치(.cursor-cross, JS가 매 mousemove마다 translate3d로만 옮김)와 스케일
   (.cursor-cross-shape, CSS transform)을 분리했다 — 같은 요소에서 JS의 inline transform과
   CSS transform이 부딪히면 인라인이 항상 이겨서 스케일이 전혀 안 보이기 때문이다. */
.cursor-cross-shape{
  position:relative; width:20px; height:20px; margin:-10px 0 0 -10px;
  transform:scale(1);
}
/* 흰 테두리는 "1px 더 큰 흰 십자를 뒤에 깔고 그 위에 주황 십자를 얹는" 2겹 구조로 만든다 —
   filter:drop-shadow()는 offset-x/offset-y/blur만 받고 box-shadow처럼 퍼지는 "spread" 값이
   없어서 drop-shadow(0 0 0 1px ...)은 무효한 값으로 조용히 무시된다(배경색과 커서 색이
   같을 때 커서가 완전히 안 보이는 버그로 실제 발견했다). 아이콘도 같은 2겹 기법을 SVG
   stroke로 재현한다. */
.cursor-cross-outline, .cursor-cross-fill{ position:absolute; inset:0; }
.cursor-cross-outline::before{ /* 세로 — 사방으로 1px씩 더 큼(5px 두께, 위아래 1px 연장) */
  content:''; position:absolute; left:50%; top:-1px; width:5px; height:calc(100% + 2px); margin-left:-2.5px; background:#FFFFFA;
}
.cursor-cross-outline::after{
  content:''; position:absolute; top:50%; left:-1px; height:5px; width:calc(100% + 2px); margin-top:-2.5px; background:#FFFFFA;
}
.cursor-cross-fill::before{ /* 세로 바 — 가운데 비움 없이 꽉 채움 */
  content:''; position:absolute; left:50%; top:0; width:3px; height:100%; margin-left:-1.5px; background:#E36B2C;
}
.cursor-cross-fill::after{ /* 가로 바 */
  content:''; position:absolute; top:50%; left:0; height:3px; width:100%; margin-top:-1.5px; background:#E36B2C;
}

/* 십자 ↔ 아이콘 전환(지시서 §4) — 아이콘 쪽으로 넘어갈 땐 0.1s 안에 scale 0으로 빠르게
   사라지고(트랜지션), 아이콘에서 돌아올 땐 0.6→1로 튕김 없이 자라난다(키프레임 — 항상
   정확히 0.6에서 시작하도록, 트랜지션의 "현재 값에서 출발"이 아니라 키프레임으로 강제). */
.cursor-cross-shape{ transition:transform .1s ease; }
html[data-cursor-icon] .cursor-cross-shape{ transform:scale(0); }
@keyframes cursorCrossReturn{ 0%{ transform:scale(.6); } 100%{ transform:scale(1); } }
.cursor-cross-shape.is-returning{ animation:cursorCrossReturn .18s ease forwards; }
html.cursor-clicking:not([data-cursor-icon]) .cursor-cross-shape{ transform:scale(.9); transition:transform .15s ease; }

@media (prefers-reduced-motion:reduce){
  .cursor-cross-shape{ transition:none; animation:none !important; }
  html[data-cursor-icon] .cursor-cross-shape{ transform:scale(0); }
}

/* ---------- 아이콘: 24px 안팎, 커서 자리를 그대로 대신함 ----------
   3겹 구조 — .cursor-icon(바깥, JS가 translate3d로 위치만) > .cursor-icon-shape(등장·
   퇴장·클릭 스케일) > .cursor-icon-anim(종류별 반복 애니메이션). 반복 애니메이션을 등장·
   클릭 스케일과 다른 요소에 걸어야 서로 transform을 덮어쓰지 않는다(지시서 §4). */
.cursor-icon-shape{
  width:24px; height:24px; margin:-12px 0 0 -12px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.4);
  transition:opacity .12s ease, transform .12s ease;
}
@keyframes cursorIconIn{
  0%{ transform:scale(.4); opacity:0; }
  10%{ opacity:1; }
  60%{ transform:scale(1.12); }
  100%{ transform:scale(1); opacity:1; }
}
.cursor-icon-shape.is-entering{
  animation:cursorIconIn .3s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* 클릭 포인터만 클릭 지점이 아이콘 중심이 아니라 화살표 끝(SVG 로컬 3,3)이다(지시서
   2026-11-14) — 다른 아이콘은 24x24 박스를 중앙(-12,-12)으로 맞추지만, 이건 끝이 거기
   오도록 margin을 다시 잡고, 등장·클릭 스케일도 그 끝에서 부풀도록 transform-origin을 맞춘다. */
html[data-cursor-icon="click"] .cursor-icon-shape{ margin:-3px 0 0 -3px; transform-origin:3px 3px; }
html[data-cursor-icon="click"] .cursor-icon-anim{ transform-origin:3px 3px; }
/* 클릭 피드백(0.9배, 0.15s) — 등장 키프레임이 돌고 있어도 !important로 눌림이 보이게 한다. */
html.cursor-clicking .cursor-icon-shape{ transform:scale(.9) !important; transition:transform .15s ease; }

.cursor-icon-anim{ width:24px; height:24px; display:flex; align-items:center; justify-content:center; transform-origin:center bottom; }
.cursor-icon-anim svg{ display:block; overflow:visible; }

/* 머무는 동안 반복(등장이 끝난 뒤 cursor.js가 is-looping을 붙인다) */
@keyframes cursorHomeBounce{
  0%{ transform:translateY(0) scaleY(1); }
  18%{ transform:translateY(-4px) scaleY(1); }
  36%{ transform:translateY(0) scaleY(1); }
  40%{ transform:translateY(0) scaleY(.92); } /* 착지할 때 살짝 눌림 */
  46%{ transform:translateY(0) scaleY(1); }
  100%{ transform:translateY(0) scaleY(1); } /* 나머지 0.6s는 쉼 */
}
@keyframes cursorKakaoPulse{
  0%{ transform:scale(1); } 15%{ transform:scale(1.18); } 30%{ transform:scale(1); }
  42%{ transform:scale(1.12); } 55%{ transform:scale(1); } 100%{ transform:scale(1); }
}
@keyframes cursorPhoneRing{
  0%{ transform:rotate(0deg); } 4%{ transform:rotate(-14deg); } 8%{ transform:rotate(14deg); }
  12%{ transform:rotate(-14deg); } 16%{ transform:rotate(14deg); } 20%{ transform:rotate(-14deg); }
  24%{ transform:rotate(14deg); } 28%{ transform:rotate(-14deg); } 32%{ transform:rotate(14deg); }
  41%{ transform:rotate(0deg); } 100%{ transform:rotate(0deg); }
}
@keyframes cursorGoSlide{
  0%{ transform:translateX(0); } 50%{ transform:translateX(6px); } 100%{ transform:translateX(0); }
}
@keyframes cursorSwipeSlide{
  0%{ transform:translateX(0); } 50%{ transform:translateX(-6px); } 100%{ transform:translateX(0); }
}
/* 클릭 포인터가 톡 눌렸다 돌아오는 동작(지시서 2026-11-14) — 1.2s 중 앞 0.5s(0~41.7%)만
   눌렀다 떼고, 나머지 0.7s(41.7~100%)는 그대로 쉰다. */
@keyframes cursorClickPulse{
  0%{ transform:scale(1); }
  20.8%{ transform:scale(.88); }
  41.7%{ transform:scale(1); }
  100%{ transform:scale(1); }
}
html[data-cursor-icon="home"] .cursor-icon-anim.is-looping{ animation:cursorHomeBounce 1.1s ease-in-out infinite; }
html[data-cursor-icon="kakao"] .cursor-icon-anim.is-looping{ animation:cursorKakaoPulse 1.1s ease-in-out infinite; }
html[data-cursor-icon="phone"] .cursor-icon-anim.is-looping{ animation:cursorPhoneRing 1.2s ease-in-out infinite; }
html[data-cursor-icon="go"] .cursor-icon-anim.is-looping{ animation:cursorGoSlide .8s ease-in-out infinite; }
html[data-cursor-icon="swipe"] .cursor-icon-anim.is-looping{ animation:cursorSwipeSlide .8s ease-in-out infinite; }
html[data-cursor-icon="click"] .cursor-icon-anim.is-looping{ animation:cursorClickPulse 1.2s ease-in-out infinite; }

@media (prefers-reduced-motion:reduce){
  .cursor-icon-shape{ transition:none; animation:none !important; }
  .cursor-icon-anim{ animation:none !important; }
  html[data-cursor-icon] .cursor-icon-shape{ opacity:1; transform:scale(1); }
}