/* YURIU shared interaction layer.
   Navigation is intentionally NOT styled here; GNB is owned only by nav-canonical.css. */

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.btn::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -240%;
  width: 146%;
  height: 240%;
  border-radius: 50%;
  background: var(--renew_txt_color_point, #082566);
  transform: translateX(-50%);
  transition: bottom 520ms cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.btn > span { position: relative; z-index: 1; }
@media (hover:hover) and (pointer:fine) {
  .btn:hover::before,
  .btn:focus-visible::before { bottom: -68%; }
}

/* One cursor system on every page. */
.cursor-invert {
  position: fixed;
  z-index: 2147483647;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  color: #000;
  mix-blend-mode: difference;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) scale(.72);
  will-change: left, top, transform;
  font-family: "Pretendard", sans-serif;
  font-size: 0;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  transition:
    opacity 160ms ease,
    transform 200ms cubic-bezier(.22,1,.36,1),
    width 280ms cubic-bezier(.22,1,.36,1),
    height 280ms cubic-bezier(.22,1,.36,1),
    border-radius 280ms cubic-bezier(.22,1,.36,1),
    font-size 160ms ease;
}
.cursor-invert.is-visible {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
}
.cursor-invert.is-interactive:not(.is-action) {
  width: 52px;
  height: 52px;
}
.cursor-invert.is-action {
  width: 112px;
  height: 46px;
  border-radius: 999px;
  font-size: 12px;
}
@media (hover:hover) and (pointer:fine) {
  html.has_custom_cursor,
  html.has_custom_cursor body,
  html.has_custom_cursor a,
  html.has_custom_cursor button,
  html.has_custom_cursor input,
  html.has_custom_cursor textarea,
  html.has_custom_cursor select,
  html.has_custom_cursor label,
  html.has_custom_cursor [role="button"],
  html.has_custom_cursor [role="link"] {
    cursor: none !important;
  }
}
@media (pointer:coarse) { .cursor-invert { display:none; } }

/* Mood-card hover used on HOME only. */
.mood_card { position: relative; }
.mood_card::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.4));
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease-out;
}
.mood_hover {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding-inline: 15px;
  color: #fff;
  text-align: center;
  opacity: 0;
  transform: translate3d(0,6px,0);
  pointer-events: none;
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}
@media (hover:hover) and (pointer:fine) {
  .mood_card:hover::after,
  .mood_card:focus-within::after,
  .mood_card:hover .mood_hover,
  .mood_card:focus-within .mood_hover { opacity: 1; }
  .mood_card:hover .mood_hover,
  .mood_card:focus-within .mood_hover { transform: translate3d(0,0,0); }
}

@media (prefers-reduced-motion:reduce) {
  .btn::before,
  .cursor-invert,
  .mood_card::after,
  .mood_hover { transition: none; }
}