/* 기능 해금(highland-feedback-1104 L — features/unlock/unlock.js). 고품질UI: 흰 선 아이콘 · 등급색 없음 · 금(지갑 골드 #e8c979)은 열린 순간 강조에만.
   잠김 = 흐린 아이콘(.38) + 아이콘 오른쪽 아래 흰 자물쇠(변신 lock.svg 와 같은 그림) · 이름 흐림. 누름 = 칸이 좌우로 짧게 떨림.
   열린 순간 = 위 가운데 어두운 반투명 띠(아이콘 + "새 기능 열림" + 이름, 자물쇠가 튀어 날아가고 빛이 훑는다) · ☰ 단추 금빛 고리 → 메뉴를 펼치면 그 칸 자물쇠 풀림 · 반짝임. */
/* 숨긴 기능(data/unlocks.json hidden): 그 입구를 감춘다 */
html.ul-hide-guild #menu-pop .menu-item[data-menu="guild"], html.ul-hide-guild .pc-guild, html.ul-hide-guild .hero-guild, html.ul-hide-guild .mp-guild { display: none !important; }
#ui .menu-item > .ul-pad { display: none; position: absolute; left: 50%; top: 18px; width: 14px; height: 14px; margin: 2px 0 0 4px; background: #fff; pointer-events: none;
  -webkit-mask: url(../morph/lock.svg) center / contain no-repeat; mask: url(../morph/lock.svg) center / contain no-repeat; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .8)); }
#ui .menu-item.ul-lock > .ul-pad { display: block; }
#ui .menu-item.ul-lock > .white-icon { opacity: .38; }
#ui .menu-item.ul-lock { color: rgba(255, 255, 255, .5); }
#ui .menu-item.ul-lock > .dot { display: none !important; }   /* 잠긴 칸에는 새 소식 점을 띄우지 않는다 */
#ui .menu-item.ul-no { animation: ul-no .32s ease-out; }
@keyframes ul-no { 0%, 100% { translate: 0; } 20% { translate: -3px; } 45% { translate: 3px; } 70% { translate: -2px; } }

/* 메뉴를 펼친 순간 새로 열린 칸: 자물쇠가 위로 튀며 사라지고 아이콘이 금빛으로 한 번 부풀었다 돌아온다 */
#ui .menu-item.ul-open > .ul-pad { display: block; animation: ul-pad-off .6s cubic-bezier(.3, 1.4, .5, 1) forwards; }
#ui .menu-item.ul-open > .white-icon { animation: ul-ico-on .9s ease-out; }
#ui .menu-item.ul-open::after { content: ""; position: absolute; left: 50%; top: 18px; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(232, 201, 121, .55) 0, rgba(232, 201, 121, .18) 45%, rgba(232, 201, 121, 0) 70%); animation: ul-glow 1.2s ease-out forwards; }
@keyframes ul-pad-off { 0% { transform: none; opacity: 1; } 35% { transform: translate(2px, -7px) rotate(18deg) scale(1.15); opacity: 1; } 100% { transform: translate(8px, -16px) rotate(40deg) scale(.6); opacity: 0; } }
@keyframes ul-ico-on { 0% { opacity: .38; transform: scale(.9); } 35% { opacity: 1; transform: scale(1.22); filter: drop-shadow(0 0 6px rgba(232, 201, 121, .9)); } 100% { opacity: 1; transform: none; } }
@keyframes ul-glow { 0% { opacity: 0; transform: scale(.5); } 30% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.35); } }

/* ☰ 단추: 열린 기능이 있는 동안 금빛 고리 숨쉬기(메뉴를 펼치면 꺼진다) */
#hud .tools .t-menu.ul-ping { position: relative; }
#hud .tools .t-menu.ul-ping::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 2px rgba(232, 201, 121, .9), 0 0 10px rgba(232, 201, 121, .7);
  animation: ul-ping 1.1s ease-in-out infinite alternate; }
@keyframes ul-ping { from { opacity: .35; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }

/* 열린 순간 띠: 위 가운데, 글자 폭(판 폭으로 늘이지 않는다) — 들어옴 .25s · 머묾 · 나감 .4s */
#ui .ul-card { position: absolute; z-index: var(--z-banner, 60); left: 50%; top: 64px; translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 8px 22px 8px 12px; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 11, 14, 0), rgba(10, 11, 14, .82) 18%, rgba(10, 11, 14, .82) 82%, rgba(10, 11, 14, 0)); overflow: hidden;
  animation: ul-card-in .25s cubic-bezier(.2, 1.3, .4, 1) both, ul-card-out .4s ease-in 2.2s forwards; }
#ui .ul-card > .ul-line { position: absolute; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, rgba(232, 201, 121, 0), rgba(232, 201, 121, .85), rgba(232, 201, 121, 0)); }
#ui .ul-card > .ul-line.t { top: 0; } #ui .ul-card > .ul-line.b { bottom: 0; }
#ui .ul-card::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40px; left: -60px; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); animation: ul-sheen .7s ease-out .45s forwards; }
#ui .ul-card .ul-ico { position: relative; width: 34px; height: 34px; flex: none; }
#ui .ul-card .ul-glyph { position: absolute; inset: 0; background: linear-gradient(#fff 12%, #f7f7f7 44%, #c7c9cc); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  filter: drop-shadow(0 0 0 rgba(232, 201, 121, 0)); animation: ul-glyph .9s ease-out .25s both; }
#ui .ul-card .ul-ico > .ul-pad { position: absolute; right: -4px; bottom: -2px; width: 16px; height: 16px; background: #fff;
  -webkit-mask: url(../morph/lock.svg) center / contain no-repeat; mask: url(../morph/lock.svg) center / contain no-repeat; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .8));
  animation: ul-pad-off .6s cubic-bezier(.3, 1.4, .5, 1) .3s forwards; }
#ui .ul-card .ul-txt { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
#ui .ul-card small { font-size: 11px; font-weight: 800; color: #e8c979; letter-spacing: .5px; }
#ui .ul-card b { font-size: 17px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px #000; }
@keyframes ul-card-in { from { opacity: 0; transform: translateY(-10px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes ul-card-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes ul-sheen { to { left: calc(100% + 20px); } }
@keyframes ul-glyph { 0% { opacity: .38; transform: scale(.85); } 45% { opacity: 1; transform: scale(1.18); filter: drop-shadow(0 0 7px rgba(232, 201, 121, .95)); } 100% { opacity: 1; transform: none; filter: drop-shadow(0 0 2px rgba(232, 201, 121, .5)); } }