:root{
  --heart-btn: 40px;
  --heart-inset: 0px;      /* 소수점 대신 정수 권장(렌더링 깨끗) */
  --heart-stroke: 1.5;
  --heart-x: px;
  --heart-y: 2.5px;
  --heart-center: 6.5px;     /* 기본은 0으로! */
  --heart-center-x: 8px;   /* ← 새로 추가: X축 */
  --heart-smoke-a: rgba(60,120,255,0.28); /* 바깥쪽 */
  --heart-smoke-b: rgba(40,90,210,0.20);  /* 안쪽  */
}

/* 버튼 */
.heart-button{
  position: relative;
  width: var(--heart-btn); height: var(--heart-btn);
  padding: 0;
  border: 0px;
  border-radius: 999px;
  background: transparent;
  box-shadow: 0 0px 0px rgba(0,0,0,.35), inset 0 0px 0 rgba(255,255,255,.06);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  backface-visibility: hidden;
  translate: var(--heart-x, 0) var(--heart-y,0);
  transition: translate .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.heart-button:hover{ background: rgba(255,255,255,.12); }
.heart-button.is-on{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
}

/* 아이콘(정중앙 + 크기) */
.heart-icon{
  position: absolute;
  inset: var(--heart-inset);
  z-index: 2;
  translate: var(--heart-center-x) var(--heart-center);
  width: 60%;
  height: 60%;
  display: block;
}

/* 선/면 */
.heart-icon .stroke{
  fill: none;
  stroke: rgba(16, 0, 0, 0.033);
  stroke-width: var(--heart-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 수정 */
.heart-icon .fill{ opacity:1; transition: fill .18s ease, opacity .18s ease; }

.heart-button.is-on .heart-icon .stroke{ opacity: 0; }
.heart-button.is-on .heart-icon .fill{ fill:#3aa0ff; } /* ON일 때 두 경로 모두 파란색으로 */

/* 내부 글로우(하트 모양) */
.heart-icon .glow{
  fill: #fff;        /* 하얀 글로우 */
  opacity: 0;      /* 강도: .12 ~ .24에서 조절 */
  pointer-events: none;
  transition: opacity .18s ease;
}

/* 켜질 때는 3D/파란 채움이 주인공이니 글로우를 줄이거나 끄고 싶으면 */
.heart-button.is-on .heart-icon .glow{ opacity: 0; }   /* (원하면 유지해도 됨) */


/* 3D 캔버스 */
.heart-canvas{
  position: absolute;
  inset: var(--heart-inset);
  translate: var(--heart-center-x) var(--heart-center);
  pointer-events: none;
  z-index: 1;
}
.heart-button.is-on .heart-canvas{ z-index: 3; }
.heart-button.is-on .heart-icon{ opacity: 0; }

/* perfume plume */
.heart-plume{ position:fixed; left:0; top:0; pointer-events:none; z-index:9999; }
.heart-plume .wisp{
  position:absolute; left:0; top:0; width: 15px; height: 21px; border-radius: 999px;
  background: radial-gradient(ellipse at 50% 60%, var(--w, rgba(1, 251, 163, 0.9)), rgba(255,230,250,0) 70%);
  filter: blur(.1px);
  opacity: 0;
  animation: wisp-up 1.2s ease-out forwards;
}

@keyframes wisp-up{
  0%   { transform: translate(-50%,-50%) rotate(0deg)   scale(.8); opacity:0; }
  15%  { opacity:.8; }
  60%  { transform: translate(-50%,-110%) rotate(var(--rot)) scale(1.1); }
  100% { transform: translate(-50%,-180%) rotate(calc(var(--rot) * 1.3)) scale(1.25); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .heart-plume .wisp{ animation: none; opacity: 0; }
}

/* 미디어 구간 */
@media (max-width: 430px){
  :root{
    --heart-btn: 44px;
    --heart-inset: 0px;
    --heart-center: 6.5px;     /* 기본은 0으로! */
    --heart-center-x: 5px;   /* ← 새로 추가: X축 */
  }
}
@media (min-width: 431px) and (max-width: 600px){
  :root{
    --heart-btn: 42px;
    --heart-inset: 0px;
    --heart-center: 7px;     /* 기본은 0으로! */
    --heart-center-x: 6px;   /* ← 새로 추가: X축 */
  }
}


/* 공통 베이스: 코어 배경 없음 */
.heart-sparkle{
  position: fixed;
  left: 0; top: 0;
  width: var(--sparkle-w, 18px);
  height: var(--sparkle-h, 50px);
  pointer-events: none;
  z-index: 9999;
  transform-origin: center;
  animation: heart-sparkle .45s ease-out forwards;
  will-change: transform, opacity, filter;
  --sparkle-color: #9ecbff;
  filter: drop-shadow(0 0 6px var(--sparkle-color));
  background: none;                 /* 코어 끔 */
}

/* 애니메이션 그대로 사용 */
@keyframes heart-sparkle{
  0%   { opacity:0; transform:scale(.35) rotate(0deg); filter:blur(.4px); }
  30%  { opacity:1; transform:scale(1.15) rotate(8deg); }
  100% { opacity:0; transform:scale(1.7)  rotate(18deg); }
}

/* 십자가: 세로와 가로 라인만 */
.heart-sparkle[data-style="tall"]{
  background: none;
  --ray-v-thick: 2px;
  --ray-h-thick: 1px;
  --halo: 6px;
  --cross-angle: 0deg;            /* 여기서 기본 각도 */
  --h-len: 60%;                   /* 가로 라인 길이 비율 */
  filter: drop-shadow(0 0 var(--halo) var(--sparkle-color));
}

/* 세로 라인 */
.heart-sparkle[data-style="tall"]::before{
  content:"";
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%) rotate(var(--cross-angle));
  width: var(--ray-v-thick);      /* 두께 */
  height: 100%;                   /* 길이 */
  background: linear-gradient(
    to bottom,
    transparent 18%,
    rgba(255,255,255,.98) 50%,
    transparent 82%
  );
  filter: drop-shadow(0 0 var(--halo) var(--sparkle-color));
}

/* 가로 라인 */
.heart-sparkle[data-style="tall"]::after{
  content:"";
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%) rotate(calc(var(--cross-angle) + 90deg));
  width: var(--ray-h-thick);      /* 두께 */
  height: var(--h-len);           /* 길이 비율 */
  background: linear-gradient(
    to bottom,
    transparent 18%,
    rgba(255,255,255,.98) 50%,
    transparent 82%
  );
  filter: drop-shadow(0 0 var(--halo) var(--sparkle-color));
}