/* 변신(features/morph, 2026-10-26 사용자 "구르기 버튼이 사라지고 거기에 구르기 대신 변신" · 같은 날 2차 "우측 상단 메뉴버튼에서 변신 탭으로 따로 · 꾹 눌러도 변신 UI ·
   변신 UI 퀄리티 높이면서 전체화면으로 · 지역별로 몬스터도 분리해서 볼 수 있는 필터") — 고품질UI 규칙(GUI 450 · 칸 52~64 · 아이콘 40 · 제목 17 · 알약 28).
   창 = 공용 전체화면 창(.popup.full, windows-css 01-popup — 반투명 판 · 머리 띠 ‹ · 흰 아이콘 · 제목 · 베이지/청록 알약). 본문 370 = 왼쪽 지역 필터 열 132 · 가운데 몬스터 격자 · 오른쪽 상세 252.
   지역 필터 = 경매장 왼쪽 분류 열 결(대륙 머리 글자 + 지역 줄, 고른 줄 = 베이지 알약 · 다 모은 지역 = 금 글자) · 격자 칸 56 · 상세 맨 위 진열대(그 몬스터가 움직이는 받침 + 빛줄기).
   색: 판 값(--ink · --ink-soft) · Lv · 다 모음 = 금(지갑 골드 #e8c979) · 능력치 증가 = 초록(좋아짐) · 진행 막대 = 청록(결정 알약 .btn.gold #548f8c → #83c3bf) · 새 변신 = 빨간 점(#e5484d, RtSlots 배지). */

/* ---- 메뉴(☰) 변신 칸 · 새 변신 점 */
#menu-pop .m-morph { position: relative; }
#menu-pop .m-morph > .mf-mdot { position: absolute; right: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55); animation: mf-dot .628s ease-in-out infinite alternate; pointer-events: none; }
/* 해금 전: HUD 단추는 숨김(11-03) · 메뉴 칸은 자물쇠로 보인다(11-04 — features/unlock .ul-lock) */
#hud .b-roll.lock, #hud .b-roll[hidden] { display: none !important; }

/* ---- 구르기 자리 단추: 구르기 그림을 걷고 얼굴 + 쿨 부채꼴(스킬 칸 .sk-cd 와 같은 결 — 밝은 앞날) · 변신 중 = 금 고리가 줄어든다 · 꾹 누르는 동안 = 흰 고리가 찬다 */
#hud .b-roll.mf-btn > img.i { display: none; }
#hud .b-roll .mf-face { position: absolute; inset: 17% 17% 19%; background: center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); pointer-events: none; }
#hud .b-roll.none .mf-face { inset: 22%; image-rendering: auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); opacity: .9; }   /* 고른 것 없음 = 메뉴와 같은 흰 변신 아이콘 */
#hud .b-roll .mf-ring, #hud .b-roll .mf-hold { position: absolute; inset: 4%; border-radius: 50%; pointer-events: none; opacity: 0; }
#hud .b-roll.cd .mf-ring { opacity: 1; background: conic-gradient(rgba(0, 0, 0, .66) calc(var(--cd) * 360deg), rgba(255, 236, 190, .9) calc(var(--cd) * 360deg) calc(var(--cd) * 360deg + 4deg), transparent 0); }
#hud .b-roll.cd .mf-face { filter: grayscale(.7) brightness(.75); }
#hud .b-roll.on .mf-ring { opacity: 1; background: conic-gradient(#ffd36b calc(var(--cd) * 360deg), rgba(255, 255, 255, .14) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  filter: drop-shadow(0 0 4px rgba(255, 200, 80, .7)); }
#hud .b-roll.holding .mf-hold { opacity: 1; inset: -6%; background: conic-gradient(#fff calc(var(--hold, 0) * 360deg), rgba(255, 255, 255, .16) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, .7)); }
#hud .b-roll.holding .mf-face { transform: scale(calc(1 - var(--hold, 0) * .1)); }   /* 꾹 = 얼굴이 살짝 눌린다 */
#hud .b-roll .mf-left { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000, 0 0 2px #000; pointer-events: none; }
#hud .b-roll.on .mf-left { place-items: end center; padding-bottom: 6%; font-size: 13px; color: #ffd36b; }
/* 해금 전(10-28 "변신 버튼도 잠금"): 흐린 흰 변신 아이콘 + 가운데 흰 자물쇠 + 아래 Lv.15 */
#hud .b-roll .mf-lock { position: absolute; inset: 31%; display: none; background: #fff; pointer-events: none;
  -webkit-mask: url(lock.svg) center / contain no-repeat; mask: url(lock.svg) center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
#hud .b-roll.lock .mf-lock { display: block; }
#hud .b-roll.lock .mf-face { inset: 22%; image-rendering: auto; opacity: .3; filter: none; }
#hud .b-roll.lock .mf-left { place-items: end center; padding-bottom: 7%; font-size: 11px; color: rgba(255, 255, 255, .85); }
#hud .b-roll .mf-rdot { position: absolute; right: 10%; top: 10%; width: 10px; height: 10px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55); animation: mf-dot .628s ease-in-out infinite alternate; pointer-events: none; }
/* 연출: 변신한 순간 튐 · 쿨 끝 = 금빛 한 번 · 거절 = 좌우 흔들림 · 새로 얻음 · 고름 = 얼굴 튐 */
#hud .b-roll.mf-go .mf-face, #hud .b-roll.mf-got .mf-face { animation: mf-face-go .42s cubic-bezier(.2, .9, .3, 1.4); }
#hud .b-roll.mf-back .mf-ring { opacity: 1; animation: mf-back .6s ease-out; }
#hud .b-roll.mf-no { animation: mf-no .3s ease-in-out; }
@keyframes mf-face-go { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes mf-back { 0% { box-shadow: 0 0 0 0 rgba(255, 211, 107, .9), inset 0 0 0 3px rgba(255, 211, 107, .9); } 100% { box-shadow: 0 0 0 10px rgba(255, 211, 107, 0), inset 0 0 0 3px rgba(255, 211, 107, 0); } }
@keyframes mf-no { 0%, 100% { translate: 0; } 25% { translate: -4px 0; } 75% { translate: 4px 0; } }
@keyframes mf-dot { to { transform: scale(.75); } }

/* ---- 변신 창: 머리 띠 = ‹ · 흰 변신 아이콘 · 제목 · 오른쪽 수집 n / 27 + 가는 막대 */
#ui .popup.full.mf > .popup-head > h2::before { -webkit-mask-image: url(menu-morph.png); mask-image: url(menu-morph.png); }
#ui .mf .mf-collect { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; white-space: nowrap; }
#ui .mf .mf-collect > i:first-child { font-style: normal; color: var(--ink-soft); }
#ui .mf .mf-count { color: var(--ink); }
#ui .mf .mf-all { width: 96px; }
#ui .mf-body { flex: 1; min-height: 0; display: flex; gap: 12px; }

/* 지역 필터 열: 전체 · 대륙 머리 글자 · 사냥 지역 줄(n/m) · 기타. 줄이 많으면 손가락으로 위아래 끌기 */
#ui .mf-zones { flex: none; width: 132px; display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: 10px; background: rgba(0, 0, 0, .28); overflow-y: auto; scrollbar-width: none; }
#ui .mf-zones::-webkit-scrollbar { display: none; }
#ui .mf-zone { position: relative; flex: none; display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 0; border-radius: 15px; background: none; color: var(--ink-soft); text-align: left; cursor: pointer;
  font-size: 12px; font-weight: 800; transition: background .15s, color .15s, transform .06s; }
#ui .mf-zone:active { transform: scale(.96); }
#ui .mf-zone .mf-zn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .mf-zone .mf-zc { flex: none; font-size: 10.5px; font-weight: 700; opacity: .85; }
#ui .mf-zone.full:not(.on) { color: #e8c979; }   /* 그 지역 몬스터를 다 모음 = 금 글자 */
#ui .mf-zone.on { background: linear-gradient(#e6decd, #c7bba3); color: #26221c; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }   /* 고른 줄 = 탭과 같은 베이지 알약 */
#ui .mf-zone.head { min-height: 22px; margin-top: 6px; padding: 0 8px; border-radius: 0; cursor: default; font-size: 10.5px; color: rgba(242, 240, 231, .45); letter-spacing: .02em; pointer-events: none; }
#ui .mf-zone.head::after { content: ""; flex: 1; height: 1px; margin-left: 2px; background: rgba(255, 255, 255, .08); }
#ui .mf-zone.head .mf-zn { flex: none; }
#ui .mf-zone .mf-zdot { position: absolute; right: 4px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: #e5484d; animation: mf-dot .628s ease-in-out infinite alternate; }

/* 가운데: 지역 이름 줄 + 격자(칸 56 · 간격 8 — 폰 가로 GUI 폭 ≈ 1000 → 8열) */
#ui .mf-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; border-radius: 10px; background: rgba(0, 0, 0, .22); }
#ui .mf-lhead { flex: none; display: flex; align-items: baseline; gap: 8px; padding: 0 2px; }
#ui .mf-lhead b { font-size: 13.5px; font-weight: 800; }
#ui .mf-lhead small { font-size: 11px; font-weight: 800; color: var(--ink-soft); }
#ui .mf-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, 56px); grid-auto-rows: 56px; gap: 8px; align-content: start; overflow-y: auto; padding: 2px; scrollbar-width: none; }
#ui .mf-grid::-webkit-scrollbar { display: none; }
#ui .mf-cell { position: relative; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 10px; cursor: pointer; transition: transform .06s;
  background: radial-gradient(circle at 50% 78%, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03) 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
#ui .mf-cell:active { transform: scale(.92); }
#ui .mf-cell .mf-face { position: absolute; inset: 7px 7px 11px; background: center bottom / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .5)); }
#ui .mf-cell.lock { background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
#ui .mf-cell.lock .mf-face { filter: brightness(0) invert(.26); }   /* 잠김 = 회색 실루엣 */
#ui .mf-cell .mf-lv { position: absolute; left: 4px; top: 2px; font-size: 9.5px; font-weight: 800; color: var(--ink); text-shadow: 0 1px 1px #000, 0 0 2px #000; }
#ui .mf-cell.max .mf-lv { color: #e8c979; }
#ui .mf-cbar { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
#ui .mf-cfill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #548f8c, #83c3bf); transition: width .4s ease-out; }
#ui .mf-cell .mf-cbar { position: absolute; left: 7px; right: 7px; bottom: 5px; height: 3px; }
#ui .mf-cell.max .mf-cfill { background: linear-gradient(90deg, #c9a24a, #f1d58a); }
#ui .mf-cell.picked::before { content: ""; position: absolute; right: 4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: #e8c979; box-shadow: 0 0 4px rgba(232, 201, 121, .8); }   /* 구르기 자리에 건 몬스터 */
#ui .mf-cell.act { box-shadow: inset 0 0 0 1.5px #ffd36b, 0 0 8px rgba(255, 200, 80, .45); }   /* 지금 변신 중 */
#ui .mf-cell.on { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 10px rgba(255, 255, 255, .3); animation: mf-sel 1.047s ease-in-out infinite alternate; }   /* 고른 칸 = 흰 빛 테 맥박(ui_fx 등급 빛 1047ms) */
#ui .mf-cell .mf-dot { position: absolute; right: 3px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; animation: mf-dot .628s ease-in-out infinite alternate; }
@keyframes mf-sel { to { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 2px rgba(255, 255, 255, .1); } }
/* 처음 열 때 · 지역을 바꿀 때 칸 차례 등장(스크롤 칸 안이라 1 을 넘지 않는다 — 고품질UI §6) */
#ui .morph-dim.fx-intro .mf-cell, #ui .mf-grid.mf-refill .mf-cell { animation: mf-cell-in .3s ease-out both; animation-delay: calc(var(--i, 0) * 14ms); }
#ui .mf-grid.mf-refill .mf-cell { animation-name: mf-cell-in2; }   /* 같은 이름이면 다시 안 돈다 */
@keyframes mf-cell-in { from { opacity: 0; transform: translateY(6px) scale(.97); } }
@keyframes mf-cell-in2 { from { opacity: 0; transform: translateY(6px) scale(.97); } }

/* 오른쪽 상세: 진열대(받침 빛 + 빛줄기 + 움직이는 몬스터) · 이름 · Lv · 처치 진행 · 유지/재사용 · 능력치 · 특수 · [선택] [변신] */
#ui .mf-info { flex: none; width: 252px; display: flex; flex-direction: column; gap: 7px; min-height: 0; overflow-y: auto; scrollbar-width: none; }
#ui .mf-info::-webkit-scrollbar { display: none; }
#ui .mf-stage { position: relative; flex: none; height: 128px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(131, 195, 191, .22), transparent 70%), linear-gradient(rgba(255, 255, 255, .05), rgba(0, 0, 0, .25)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
#ui .mf-stage .mf-ray { position: absolute; left: 50%; bottom: 10px; width: 150px; height: 140px; margin-left: -75px; pointer-events: none;
  background: conic-gradient(from -40deg at 50% 100%, transparent 0 8deg, rgba(255, 255, 255, .07) 14deg, transparent 20deg 30deg, rgba(255, 255, 255, .09) 40deg, transparent 50deg 60deg, rgba(255, 255, 255, .07) 66deg, transparent 72deg);   /* 받침에서 위로 부채꼴(가운데 = 바로 위) */
  animation: mf-ray 3.2s ease-in-out infinite alternate; transform-origin: 50% 100%; }
#ui .mf-stage .mf-ped { position: absolute; left: 50%; bottom: 8px; width: 120px; height: 22px; margin-left: -60px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(160, 225, 220, .5), rgba(84, 143, 140, .25) 45%, transparent 72%); box-shadow: 0 0 18px rgba(131, 195, 191, .25); }
#ui .mf-stage .mf-anim { position: absolute; left: 50%; bottom: 6px; width: 160px; height: 112px; margin-left: -80px; image-rendering: pixelated; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .5)); }
#ui .mf-stage .mf-onmark { position: absolute; left: 8px; top: 8px; display: none; height: 20px; padding: 0 9px; border-radius: 10px; background: rgba(84, 62, 14, .8); box-shadow: inset 0 0 0 1px #ffd36b;
  font-size: 10.5px; font-weight: 800; line-height: 20px; color: #ffd36b; }
#ui .mf-stage.act { box-shadow: inset 0 0 0 1.5px #ffd36b, inset 0 0 22px rgba(255, 200, 80, .25); }
#ui .mf-stage.act .mf-onmark { display: block; }
#ui .mf-stage.act .mf-ped { background: radial-gradient(ellipse at 50% 50%, rgba(255, 220, 140, .6), rgba(200, 150, 60, .25) 45%, transparent 72%); }
#ui .mf-stage.lock { background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .4)); }
#ui .mf-stage.lock .mf-anim { filter: brightness(0) invert(.22); }   /* 잠김 = 어두운 실루엣 */
#ui .mf-stage.lock .mf-ray { display: none; }
#ui .mf-stage.lock .mf-ped { opacity: .25; }
#ui .mf-stage.mf-swap .mf-anim { animation: mf-swap .34s cubic-bezier(.2, .9, .3, 1.4); }
#ui .mf-stage.mf-swap .mf-ped { animation: mf-ped .5s ease-out; }
@keyframes mf-ray { from { transform: rotate(-4deg); opacity: .7; } to { transform: rotate(4deg); opacity: 1; } }
@keyframes mf-swap { 0% { transform: translateY(8px) scale(.9); opacity: .3; } 100% { transform: none; opacity: 1; } }
@keyframes mf-ped { 0% { box-shadow: 0 0 0 0 rgba(160, 225, 220, .7); } 100% { box-shadow: 0 0 26px 6px rgba(160, 225, 220, 0); } }
#ui .mf-who { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 0 2px; }
#ui .mf-who b { min-width: 0; font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .mf-who small { flex: none; font-size: 11.5px; font-weight: 800; color: #e8c979; }
#ui .mf-prog { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 0 2px; }
#ui .mf-bar { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
#ui .mf-fill { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #548f8c, #83c3bf); transition: width .4s ease-out; }
#ui .mf-kills { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
#ui .mf-times { display: flex; gap: 6px; }
#ui .mf-t { flex: 1; display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 10px; border-radius: 12px; background: rgba(255, 255, 255, .07); font-size: 11px; white-space: nowrap; }
#ui .mf-t i { font-style: normal; color: var(--ink-soft); }
#ui .mf-t b { font-weight: 800; }
#ui .mf-stats { display: flex; flex-wrap: wrap; gap: 3px 12px; padding: 0 2px; font-size: 11.5px; }
#ui .mf-stat { white-space: nowrap; }
#ui .mf-stat i { font-style: normal; color: var(--ink-soft); margin-right: 4px; }
#ui .mf-stat b { color: #7dd88a; font-weight: 800; }
#ui .mf-sp { padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font-size: 11px; line-height: 1.4; }
#ui .mf-spn { margin-right: 6px; font-weight: 800; color: #e8c979; }
#ui .mf-spd { color: var(--ink-soft); }
#ui .mf-lock { margin: 0; padding: 0 2px; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
#ui .mf-btns { flex: none; display: flex; justify-content: flex-end; gap: 6px; margin-top: auto; padding-top: 2px; }
#ui .mf-btns .btn { flex: none; }
#ui .mf-btns .mf-go:not(.off) { animation: mf-go-glow 1.4s ease-in-out infinite alternate; }   /* 바로 변신할 수 있음 = 청록 빛 숨쉬기 */
@keyframes mf-go-glow { to { box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 2px 4px rgba(0, 0, 0, .35), 0 0 12px rgba(131, 195, 191, .55); } }

/* ---- 첫 변신 안내 글 알약(손가락 위 — 판 상자(#ui)와 같이 도는 층 .mf-tip-layer 에 붙고 GUI 배율 --k 를 따른다) */
.mf-tip-layer { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 60; pointer-events: none; }
.mf-tip { position: absolute; left: 0; top: 0; z-index: 60; transform: translate(-50%, -100%) scale(var(--k, 1)); transform-origin: 50% 100%; pointer-events: none; opacity: 0; transition: opacity .15s;
  padding: 0 14px; height: 28px; border-radius: 14px; background: rgba(18, 20, 22, .9); box-shadow: inset 0 0 0 1.5px #e8c979, 0 3px 10px rgba(0, 0, 0, .45);
  font-size: 12.5px; font-weight: 800; line-height: 28px; color: #f6e7bd; white-space: nowrap; }
.mf-tip::after { content: ""; position: absolute; left: calc(50% + var(--ax, 0px)); bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: rgba(18, 20, 22, .9); box-shadow: 1.5px 1.5px 0 #e8c979; transform: rotate(45deg); }
.mf-tip.on { opacity: 1; animation: mf-tip-bob .8s ease-in-out infinite alternate; }
.mf-tip.on.in { animation: mf-tip-in .26s cubic-bezier(.2, .9, .3, 1.4), mf-tip-bob .8s ease-in-out .26s infinite alternate; }
@keyframes mf-tip-in { from { transform: translate(-50%, -100%) scale(calc(var(--k, 1) * .6)); opacity: 0; } }
@keyframes mf-tip-bob { to { transform: translate(-50%, calc(-100% - 4px)) scale(var(--k, 1)); } }
/* 화면 위 끝 대상(메뉴 ☰ — 10-27 첫 변신 안내)은 위에 자리가 없어 대상 아래로: 꼬리는 위, 위아래 흔들림도 아래쪽 */
.mf-tip.dn { transform: translate(-50%, 0) scale(var(--k, 1)); transform-origin: 50% 0; }
.mf-tip.dn::after { bottom: auto; top: -5px; box-shadow: -1.5px -1.5px 0 #e8c979; }
.mf-tip.dn.on.in { animation: mf-tip-in-dn .26s cubic-bezier(.2, .9, .3, 1.4), mf-tip-bob-dn .8s ease-in-out .26s infinite alternate; }
.mf-tip.dn.on { animation-name: mf-tip-bob-dn; }
@keyframes mf-tip-in-dn { from { transform: translate(-50%, 0) scale(calc(var(--k, 1) * .6)); opacity: 0; } }
@keyframes mf-tip-bob-dn { to { transform: translate(-50%, 4px) scale(var(--k, 1)); } }