/* 고객용 페이지 공통 — 현재 tcglive.co.kr 과 같은 마우스 커서 · 상품 사진 효과 */

/* 커서 3종 (원본: 아임웹 사이트 커서 이미지, assets/cursor 로 옮겨 보관) */
body { cursor: url("cursor/default.png"), default; }
button, a, select, label, summary, .btn, .tab, .chip, [onclick], [role="button"], [data-add], [data-cat], [data-type],
input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"] {
  cursor: url("cursor/pointer.png"), pointer;
}
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"],
input[type="number"], input:not([type]), textarea, [contenteditable="true"] {
  cursor: url("cursor/text.png"), text !important;
}
button:disabled, .btn:disabled { cursor: url("cursor/default.png"), not-allowed; }
input[readonly] { cursor: url("cursor/pointer.png"), pointer !important; }   /* 주소 검색칸 (누르면 검색) */

/* 상품 사진: 남색 틀 → 마우스를 올리면 살짝 튀듯 커지고 테두리 색이 흐름 */
@keyframes tcglive-border-flow { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
.tl-thumb {
  position: relative; box-sizing: border-box; border-radius: 12px; border: 3px solid #27397d; padding: 4px;
  overflow: hidden; background: #fff 0 0 / 300% 300%; transform: scale(1);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease-out, background .4s ease-out;
}
.tl-thumb > .tl-thumb-in { display: block; width: 100%; height: 100%; border-radius: 8px; overflow: hidden; background: #f2f3fa; }
.tl-hover:hover .tl-thumb {
  transform: scale(1.02); z-index: 2;
  box-shadow: rgba(39, 57, 125, .35) 0 10px 24px;
  background: linear-gradient(120deg, #27397d 0%, #05b2f5 25%, #7b3ff2 50%, #27397d 75%, #05b2f5 100%) 0 0 / 300% 300%;
  animation: tcglive-border-flow 1.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .tl-thumb { transition: none; }
  .tl-hover:hover .tl-thumb { animation: none; transform: none; }
}