/* 젤리 버튼 — 컬러가 있는 귀여운 젤리처럼 입체감 있게
 *
 * 근거
 *   `00_메인헤더\전체계획.md` #46 【지금】 (2026-08-21 사람 원문:
 *     "버튼을 컬러가 있는 귀여운 젤리처럼 입체감 있게 만들기 - 지금 팀배정해서 즉시 이행")
 *   2026-08-22 사람 보강: "각 버튼은 귀여운 젤리 형태, 터치사운드, 이팩트, 업그레이드"
 *
 * 젤리로 보이게 하는 것은 색이 아니라 **네 겹**이다. 하나라도 빠지면 그냥 둥근 버튼이 된다.
 *   ① 몸통 그라데이션 — 위가 밝고 아래가 어둡다(빛이 위에서 온다 · 강제 기본 세트 [광원 하나])
 *   ② 윗면 하이라이트 — 몸통 위쪽 38% 에 흰 유광. **이것이 [젤리]와 [플랫]을 가른다**
 *   ③ 바닥 두께 — `box-shadow: 0 Npx 0` 로 아래에 같은 색의 어두운 단을 깐다(눌리면 이 단이 얇아진다)
 *   ④ 눌림 = 찌그러짐 — scaleX 를 늘리고 scaleY 를 줄였다가 되튄다. 이게 없으면 딱딱해 보인다
 *
 * 색은 이 파일이 정하지 않는다 — 쓰는 쪽이 `--jelly` 한 변수만 준다.
 *   밝은 면·어두운 면·바닥 단은 전부 그 색에서 `color-mix()` 로 만든다(값을 세 벌로 적지 않는다).
 *   `color-mix` 를 모르는 구형 WebView 를 위해 바로 위에 평평한 대체값을 둔다.
 */

.jelly{
  --jelly-img:url("assets/ui/jelly/purple.webp");
  --jelly-ink:#1f1030;             /* 글자색 */

  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  box-sizing:border-box;
  min-height:52px;                 /* = 26 + 26. 젤리버튼굽기.mjs 의 슬라이스 78 ÷ 3 */
  padding:0 10px;
  border-style:solid;
  border-width:26px;
  border-image:var(--jelly-img) 78 fill stretch;
  background:transparent;
  color:var(--jelly-ink);
  font-family:inherit; font-size:1rem; font-weight:700; line-height:1;
  text-decoration:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.34));
  transition:filter 140ms ease;
}
/*  ★ `overflow:hidden` 을 쓰지 않는다 — 52px 버튼은 테두리 26+26 이 높이를 다 쓰므로
    내용 상자의 높이가 0 이다. 여기서 넘침을 자르면 **글자가 통째로 사라진다**(2026-08-22 실측).
    글자는 테두리 위로 넘쳐 그려지고, 그것이 이 방식에서 정상이다. */
.jelly > *{ position:relative; z-index:2; }

.jelly:hover{ filter:drop-shadow(0 6px 14px rgba(0,0,0,.34)) brightness(1.05); }
.jelly:focus-visible{ outline:3px solid rgba(255,255,255,.85); outline-offset:3px; }
.jelly:active{ filter:drop-shadow(0 2px 6px rgba(0,0,0,.34)) brightness(.97); }

/* ② 눌림 — 찌그러졌다가 되튄다. jelly.js 가 클래스를 붙였다 뗀다 */
.jelly.is-squish{ animation:jelly-squish 420ms cubic-bezier(.28,1.5,.42,1); }
@keyframes jelly-squish{
  0%   { transform:scale(1,1); }
  22%  { transform:scale(1.09,.86); }
  52%  { transform:scale(.96,1.06); }
  78%  { transform:scale(1.03,.98); }
  100% { transform:scale(1,1); }
}

/* 터치 이펙트 — 누른 자리에서 퍼지는 고리 + 반짝이 세 알 (jelly.js 가 심는다) */
.jelly-fx{ position:absolute; z-index:3; width:0; height:0; pointer-events:none; }
.jelly-ring{
  position:absolute; left:0; top:0; width:120px; height:120px; margin:-60px 0 0 -60px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 68%);
  animation:jelly-ring 520ms ease-out forwards;
}
@keyframes jelly-ring{
  0%  { transform:scale(.2); opacity:.9; }
  100%{ transform:scale(1.25); opacity:0; }
}
.jelly-spark{
  position:absolute; left:0; top:0; width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%; background:#fff;
  animation:jelly-spark 560ms cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes jelly-spark{
  0%  { transform:translate(0,0) scale(1); opacity:.95; }
  100%{ transform:translate(var(--sx,0), var(--sy,0)) scale(.2); opacity:0; }
}

/* 크기 변형 */
.jelly.jelly-sm{ min-height:44px; border-width:22px; border-image:var(--jelly-img) 66 fill stretch; font-size:.86rem; }
.jelly.jelly-lg{ min-height:62px; border-width:31px; border-image:var(--jelly-img) 93 fill stretch; font-size:1.08rem; }
.jelly.jelly-block{ display:flex; width:100%; }

/* 색 프리셋 — **새 색을 만들지 않는다.** 마을 씬 강조색이 정본이다(village-shop.js:53).
   그림은 app/tools/젤리버튼굽기.mjs 가 그 hex 에서 굽는다 — 여기 hex 를 다시 적지 않는다. */
.jelly-pink{   --jelly-img:url("assets/ui/jelly/pink.webp");   --jelly-ink:#fff3f7; }
.jelly-gold{   --jelly-img:url("assets/ui/jelly/gold.webp");   --jelly-ink:#3a2a06; }
.jelly-purple{ --jelly-img:url("assets/ui/jelly/purple.webp"); --jelly-ink:#1f1030; }
.jelly-violet{ --jelly-img:url("assets/ui/jelly/violet.webp"); --jelly-ink:#f5efff; }
.jelly-green{  --jelly-img:url("assets/ui/jelly/green.webp");  --jelly-ink:#eefaf4; }
.jelly-rose{   --jelly-img:url("assets/ui/jelly/rose.webp");   --jelly-ink:#3a1122; }
.jelly-mint{   --jelly-img:url("assets/ui/jelly/mint.webp");   --jelly-ink:#0c3229; }
.jelly-ink{    --jelly-img:url("assets/ui/jelly/ink.webp");    --jelly-ink:#efe6f7; }

@media (prefers-reduced-motion: reduce){
  .jelly.is-squish{ animation:none; }
  .jelly-ring, .jelly-spark{ animation-duration:1ms; }
}