/* 부동산바로 허브 — ★카드가 «살아 움직이게» (대표 직권 2026-09-16)
   대표 원문: 「마우스를 대면 그림이 살아 움직이는 거 같이」
   ★주문 그대로
     · 그림 1.04배 ★천천히 확대
     · 카드 8px 떠오름
     · 안쪽 빛줄기·입자가 움직이는 것처럼
     · 마우스 자리를 따라 ★최대 3도 기울임
     · 테두리에 ★은은한 파란빛이 흐름
     · 떼면 부드럽게 원상복귀
     · ★폰에서는 기울임 끄고 «자동 호흡»만
     · ★번쩍이지 않는다 · ★글자 가독성을 해치지 않는다
     · prefers-reduced-motion 지킴
   ★transform 과 opacity 만 건드린다. 레이아웃을 흔들면 폰에서 버벅인다. */

.칸 {
  --기x: 0deg;            /* 마우스 따라 기우는 각 */
  --기y: 0deg;
  --빛x: 50%;             /* 마우스 자리 (빛 덩이가 따라간다) */
  --빛y: 40%;
  --뜸: 0px;              /* 떠오른 높이 */
  transform: perspective(900px) rotateX(var(--기x)) rotateY(var(--기y)) translateY(var(--뜸));
  /* ★2026-09-18 — ★preserve-3d 를 뺐다.
     ★대표 「원클릭에 안 들어가고 어떤 건 안 들어가져」의 ★범인이다.
     기울어진 3D 판 위에서는 ★크롬이 누른 자리를 엉뚱한 면으로 계산해 ★클릭을 흘린다.
     ★자식 중에 3D 로 띄우는 것이 없으니 ★빼도 보이는 것은 그대로다. */
  transform-style: flat;
  transition: transform .42s cubic-bezier(.22, .61, .36, 1),
              border-color .3s, box-shadow .42s;
  will-change: auto;
}
.칸:hover,
.칸:focus-visible {
  --뜸: -8px;                                   /* ★8px 떠오름 */
  border-color: rgba(125, 211, 252, .42);
  box-shadow: 0 18px 44px -18px rgba(56, 189, 248, .55),
              0 0 0 1px rgba(125, 211, 252, .1) inset;
  will-change: transform;
}
/* ★기울이는 동안은 넘어가는 시간을 짧게 — 손을 따라와야 «살아 있다»고 느낀다 */
.칸.기움 { transition: transform .12s linear, border-color .3s, box-shadow .42s; }

/* ── 그림: 천천히 1.04배 ───────────────────────────── */
.띠 img {
  transform: scale(1);
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);   /* ★천천히 */
  backface-visibility: hidden;
}
.칸:hover .띠 img,
.칸:focus-visible .띠 img { transform: scale(1.04); }

/* ── 마우스를 따라다니는 «빛 덩이» ────────────────────
   ★번쩍이지 않게 아주 옅게. 글자가 있는 아래쪽은 원래 어둡게 깔려 있다. */
.띠::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(240px 160px at var(--빛x) var(--빛y),
              rgba(125, 211, 252, .26), transparent 68%);
  opacity: 0;
  transition: opacity .38s;
  pointer-events: none;
}
.칸:hover .띠::before,
.칸:focus-visible .띠::before { opacity: 1; }

/* ── 안쪽을 가로지르는 빛줄기 ─────────────────────────
   ★한 번 훑고 지나간다. 계속 번쩍이면 눈이 아프다. */
.띠 .줄기 {
  position: absolute; inset: -40% -60%; z-index: 2;
  pointer-events: none; opacity: 0;
  background: linear-gradient(105deg,
      transparent 42%, rgba(186, 230, 253, .34) 50%, transparent 58%);
  transform: translateX(-38%);
}
.칸:hover .띠 .줄기,
.칸:focus-visible .띠 .줄기 { animation: 훑기 1.15s cubic-bezier(.3, .7, .4, 1) .06s both; }
@keyframes 훑기 {
  0%   { opacity: 0;   transform: translateX(-38%); }
  22%  { opacity: 1; }
  100% { opacity: 0;   transform: translateX(38%); }
}

/* ── 떠오르는 입자 ───────────────────────────────────
   ★네 알만. 많이 띄우면 «자료»가 아니라 «반짝이»가 된다. */
.띠 .알 { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
          transition: opacity .4s; }
.칸:hover .띠 .알,
.칸:focus-visible .띠 .알 { opacity: 1; }
.띠 .알 i {
  position: absolute; bottom: -8%;
  width: 3px; height: 3px; border-radius: 50%;
  background: #bae6fd;
  box-shadow: 0 0 6px rgba(186, 230, 253, .85);
}
.칸:hover .띠 .알 i,
.칸:focus-visible .띠 .알 i { animation: 오름 3.4s linear infinite; }
.띠 .알 i:nth-child(1) { left: 18%; animation-delay: 0s;   }
.띠 .알 i:nth-child(2) { left: 41%; animation-delay: .85s; }
.띠 .알 i:nth-child(3) { left: 63%; animation-delay: 1.7s; }
.띠 .알 i:nth-child(4) { left: 84%; animation-delay: 2.5s; }
@keyframes 오름 {
  0%   { transform: translateY(0)      scale(.7); opacity: 0; }
  14%  { opacity: .9; }
  80%  { opacity: .55; }
  100% { transform: translateY(-190px) scale(1.1); opacity: 0; }
}

/* ── 테두리를 도는 파란빛 ─────────────────────────────
   ★테두리«만» 빛나게 mask 로 가운데를 파낸다. 글자 위로 안 올라온다. */
.칸::after {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--돎, 0deg),
      transparent 0deg, rgba(56, 189, 248, .75) 46deg,
      rgba(34, 211, 238, .28) 92deg, transparent 150deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .38s;
  pointer-events: none;
}
.칸:hover::after,
.칸:focus-visible::after { opacity: 1; animation: 돌기 3.6s linear infinite; }
@property --돎 { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes 돌기 { to { --돎: 360deg; } }

/* ── ★폰: 기울임 끄고 «자동 호흡»만 ──────────────────
   손가락엔 «마우스 자리»가 없다. 대신 카드가 천천히 숨 쉬게 한다. */
@media (hover: none), (pointer: coarse) {
  .칸 { transform: none; transition: box-shadow .4s, border-color .4s; }
  .칸:hover, .칸:focus-visible { --뜸: 0px; transform: none; }
  .칸::after { opacity: .5; animation: 돌기 7s linear infinite; }   /* 테두리는 아주 천천히 */
  .띠 img { animation: 호흡 7.5s ease-in-out infinite; transition: none; }
  .칸:hover .띠 img { transform: none; }
  .띠::before, .띠 .줄기 { display: none; }        /* 마우스용 효과는 접는다 */
  .띠 .알 { opacity: .55; }
  .띠 .알 i { animation: 오름 4.2s linear infinite; }
}
@keyframes 호흡 {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

/* ── ★움직임을 꺼 달라 한 사람에겐 전부 정지 ────────── */
@media (prefers-reduced-motion: reduce) {
  .칸, .칸:hover, .칸:focus-visible { transform: none !important; transition: border-color .2s; }
  .띠 img { transform: none !important; animation: none !important; transition: none !important; }
  .띠::before, .띠 .줄기, .띠 .알 { display: none !important; }
  .칸::after { animation: none !important; opacity: .28; }
}

/* ★누르는 동안은 ★움직이지 않는다 — 손가락/마우스가 눌렀다 뗄 때
   카드가 밀리면 브라우저가 «끌기»로 보고 ★클릭을 버린다 (2026-09-18) */
.칸.누름 { transition: none; --기x: 0deg; --기y: 0deg; }