/* 하늘섬 재료 HUD(features/skyisle sky_materials.js, 2026-10-28) — 고품질UI 규칙(GUI 450 · 알약 28): 어두운 반투명 알약 = 블럭 도트 14x16 + 흰 글자 검은 테 개수.
   자리 = 위 가운데(왼쪽 위 미니맵 · 퀘스트 알리미, 오른쪽 위 메뉴 아이콘 · 채팅 줄과 겹치지 않는다 — 하늘섬 판엔 보스 이름판이 없다). 주운 순간 = 알약 톡 튐 + 숫자 금빛. */
#hud .skm-bar { left: 50%; top: 8px; transform: translateX(-50%); display: flex; gap: 6px; pointer-events: none; }
/* 알약 = 지금 탭에 드는 재료만(sky_materials.js needs — 많아야 3~4개라 화면 폭 안 · 참고작 도깨비의 세계 위 가운데 재화도 3개, dokkaebi-world.md HUD 표). 누르면 이름 말풍선 */
#hud .skm-pill { position: relative; display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px 0 7px; border-radius: 14px;
  background: rgba(8, 10, 14, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 1px 3px #0008; pointer-events: auto; cursor: pointer; touch-action: manipulation; }
#hud .skm-pill:active { transform: scale(.92); transition: transform .06s ease-out; }
#hud .skm-pill .skm-need { font: 700 12px/1 var(--ui-font); font-style: normal; color: rgba(255, 255, 255, .62); margin-left: -3px; }
#hud .skm-pill .skm-need:empty { display: none; }
#hud .skm-pill.lack .skm-n { color: #ff8f84; }   /* 모자람 = 붉은 보유 값(건설 카드 .skb-chip.lack 과 같은 값) */
#hud .skm-pill.in { animation: skm-in .26s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes skm-in { from { opacity: 0; translate: 0 -5px; } }
/* 이름 말풍선 = 알약 아래 가운데 · 어두운 판 + 위 꼬리(건설 판 아이템 정보 결) · 작은 팝 1.025(hq-ui fx-pop) */
#hud .skm-tip { position: absolute; left: 50%; top: calc(100% + 7px); z-index: 2; translate: -50% 0; height: 22px; padding: 0 9px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  display: flex; align-items: center; font: 700 12px/1 var(--ui-font); color: #fff; background: rgba(8, 10, 14, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 2px 6px #000a;
  animation: skm-tip .18s cubic-bezier(.2, .9, .3, 1.2) both; }
#hud .skm-tip::before { content: ""; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; rotate: 45deg; background: rgba(8, 10, 14, .9); box-shadow: inset 1px 1px rgba(255, 255, 255, .16); }
#hud .skm-tip.out { opacity: 0; transition: opacity .2s; }
@keyframes skm-tip { from { opacity: 0; scale: .9; } 70% { scale: 1.025; } to { scale: 1; } }
#hud .skm-pill .skm-ico { position: static; width: 14px; height: 16px; image-rendering: pixelated; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
#hud .skm-pill .skm-n { font-size: 14px; min-width: 10px; }
#hud .skm-pill.skm-up { animation: skm-up .42s cubic-bezier(.2, .9, .3, 1.4); }
#hud .skm-pill.skm-up .skm-n { animation: skm-gold .7s ease-out; }
@keyframes skm-up { 0% { transform: scale(1); } 35% { transform: scale(1.18) translateY(-2px); } 100% { transform: scale(1); } }
@keyframes skm-gold { 0% { color: #ffe08a; } 100% { color: #fff; } }
#hud.ctl-editing .skm-bar { opacity: .35; }